Embedded Payment Widget not Scrolling on mobile devices

[rraybeck]

The embedded iframe code is not scrolling correctly on smaller mobile responsive like phones. It is working fine on tablets and laptops.
Here is the page we're using: http://www.hon25.org/donate

We have attempted to adjust the padding in the iframe code, but have had no luck.
Developer help needed!

Thanks!

[CnP.Support.AM]

Good day @rraybeck

Would you please share the device name and model# in which you are seeing the above issue?

Looking forward to hearing back from you.

[rraybeck]

iPhone 5, operating systems iOS 9 and 10. We have not tested on android yet or iPhone 6.

[rraybeck]

We have tried increasing the padding and
turning the overflow to visible, but when we do that the form actually “bleeds” over into the footer of the website, essentially breaking the main framework for where the footer begins.

[CnP.Support.AM]

Good day @rraybeck

We see what you are referring to and hopefully it will be addressed in the next update of Connect which is due out in the next week. Sorry for the inconvenience.

However, as of now you may replace the below style in embedded code in your page which should resolve the issue.

<style>.embed-container { position: relative; padding-bottom: 178%; height: 0; overflow: auto; -webkit-overflow-scrolling:touch; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

Please check and let us know if you find any issues.

[kkosak]

Is there an update on this issue? I've looked through all of the threads on this and seen a lot of "next update" promises, but no solutions. Has the scrolling issue on mobile been resolved or has a fix been pinpointed? I haven't been able to fix on my forms and am therefore stuck using buggy gravity forms.