Templates Plugins Courses

Dynamic Height Plugin Issue

Hello,

I purchased the Dynamic Height plugin but seem to be having an issue with it. I have applied the plugin to the index element and set it to 100% of the viewport height. But the issue I’m having is when I load the page on mobile, the page scrolls down a little bit (it shouldn’t scroll since the height should dynamically be a 100% of the viewport height), then when I scroll back up it locks and then it no longer scrolls. So the plugin only seems to actually work once I scroll up and down a little bit.

Dear mwazir1, hello

Concerning your issue with the Dynamic Height plugin.
Let us to assure you that your issue will be reslved asap. Our Support Team is working on it.

To help us better understand the problem, please provide the details on your issue, like the following:

  • identify which type of the element you have used on your page with the Dynamic Height plugin;
  • provide screenshots of each elements’ properties, placed on your page (example);
  • if it is possible, please provide the short video record of the main issue (screencapture of your phone, when the page scrolls down and no longer scrolls).

With your assistance we can resolve your issue shortly. Please provide the details, listed above.

Best wishes,

Hi Kate,

So I think I figured out what the issue is. On chrome mobile, the chrome header collapses when the user scrolls down a little bit on the page so I think what’s happening is when the page initially loads the dynamic plugin fills up 100% of the viewport (excluding the height of browser header) so that is why I am able to scroll down the same height as the browser header

Then when I scroll back up and the browser header re-appears the viewport locks again and no longer lets me scroll down anymore, which is exactly what I intended in the first place but this only happens after I scroll down then up again.

Here’s a screenshot on initial load (theoretically I shouldn’t be able to scroll up and down on the page because the page should take up 100% of the viewport height, but that’s not the case as you can see in the second screenshot below)

Here you can see that I was able to scroll down a little bit, you can see a white area between the bottom of the map and bottom navigation bar which is basically the same height as the browser header bar that is no longer showing because it collapses when I scroll down.

Then when I scroll back up the browser header bar re-appears and now I am no longer able to scroll up or down.

So my issue is how do I get the page to react like this, where I shouldn’t be able to scroll down at all, on the initial load.

Another issue I am facing is I want the the dynamic height to kick in on only certain views. The dynamic height is set on the index page but is there a way for me to disable it based on a certain condition? I tried to hide it or even make the ID field null based on certain conditions but it seems like once the dynamic height is applied I can’t “unapply it” even if if the condition or state changes.

For example I want this map view to dynamically adjust based on the user’s viewport height but if they click on the “More” icon at the bottom I want to disable the dynamic height but that doesn’t seems to be working for me even if I set specific conditions.

@mwazir1,

I’m so sorry for the delayed reply :pray: I must have missed your request.
I’m checking the possible solution for your requests. When I have any useful info - I will let you know at once.

Thank you for understanding.
Regards,

@mwazir1,

  1. How to deal with the browser header.

I’m afraid, there is nothing can be done with this case because the hide/show browser header is a feature of the Chrome browser - it just can’t be changed. And, because of this, the scrolling down will remain on the page.

As a little trick, I suppose you may add 5% to the height viewport to avoid showing the white space between the map and navigation bar when the page can scroll down right after it is loaded.

  1. Disabling the Dynamic Height plugin with the button.

I made thorough testing of any available variant to add this option but it appears that if you have added the plugin element to the page and indicated the ID of affected element - there is no way to disable this plugin (I tried custom states also; within the editor’s conditions there is no suitable condition).

As a probable workaround, you can create a copy of your page, without the plugin element. Add the button (More) which will open the page copy, where the Dynamic Height is not used.

Perhaps these are not the best workarounds, but in the current situation, they might help. Apologies for the inconvenience :pray:

Regards,

1 Like