Embedded forms causing page to be "Sticky"

Page is “Sticky” on mobile when using the content element to embed a form (or video, as I did when I was trying to troubleshoot). You can’t scroll down unless you press and hold on the screen above or below the embedded form and drag without removing contact to the screen.

In other words, if you try and “Flick” the screen to scroll it bounces back to the original position.

This is an example of a page it’s happening on

What I’ve done to troubleshoot:

  • Turned off plugins one by one
  • embedded various other things on pages including forms from other builders and YouTube videos - issue persists.

Thank you in advance for any feedback!

Hello @powerplantbody,

Thanks for writing in! You have done plugin conflict and some troubleshooting. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Thank you! Just added a secure note.

Hello @powerplantbody,

I tried to access your site dashboard but the given credentials are not working on my end. Please recheck and send us again so that we can investigate the settings. Please have a look at the attached screenshot in the secure note.

For the quick fix and for the given only, you can add this custom CSS under X/Pro—>Theme Option -->CSS

body.page-id-30642 {
    overflow-x: initial;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

Hi. My apologies, I had not verified the login credentials. You should be able to login now using those credentials without issue.

Thanks again!

Hi @powerplantbody,

The issue is due to the double scrollbar in the given URL. The double scrollbar appears if some of the element is taller or similar in height to its container. Here is in your case the Content Area element consist of the iframe which has the height of 500px is greater than its container. I would suggest you adjust the column and iframe height to get rid of this issue.

Hope it helps.
Thanks

Hi. Thanks for getting back to me but that is not the issue. I’ve increased the height before and it didn’t resolve the issue. I just did it again to double check and it does’t resolve the issue.

Have you tested this from a mobile device? My iPhone 11 is showing that any page with an embedded element causes this “Sticky” issue where you cannot scroll down.

Thanks in advance!

I recreated a page on another domain and added it to the secure note above. The issue is not happening on that domain, even though the page is near identical.

Hello @powerplantbody,

Instead of using a fixed pixel height, please use 100vh which means the viewport height. The iframe will be as high as the browser height and then the scroll bar will display.

Kindly let us know if this works out for you.

that doesn’t work. I get the feeling that you guys aren’t actually doing any troubleshooting… I don’t mean to sound like a jerk but I’ve shown you that a) it’s not happening on my other site with the exact same setup and b) there are no plugin or CSS conflicts.

I look forward to hearing from you.

I figured it out. I don’t know why, but when you set column max width it screws with embedded elements. If you set row max width it seems to be fine. Worth looking into for sure.

Hello @powerplantbody,

We are glad you’ve figured out a way to resolve your issue.
Thank you very much for letting us know.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.