JS embedded form can not be scrolled on iPad and iPhone

Opening a thread based on Twitter conversation.

2nd attempt at answering this as well...

iPad and iPhone users cannot scroll through my form so never see the Submit button,  Is this a common problem or am I missing something?  Thanks, Stuart

www.capturebox.co.uk/booking-form

This worked through Edge but not through Explorer11....

Strange. Should work on IE as well, but I would always recommend using the latest version of Internet Explorer (Edge) since the newer versions are starting to catch up with the standards.

I personally suggest using FireFox if at all possible since it is more standards compliant and secure.

In regards to your issue. I see that you have embedded the form using the JS embed code.

Please do try to change it into the iframe embed code instead.

You can see how to do the same here: How to get the jotform iFrame Code

Hi Ben,

Converted to iFrame but still getting the same problem on an iPad?   Is there something within the iFrame code preventing this?

cheers,

Stuart

Hi Stuart,

When I test the embedded form on the website I was able to see the problem as well.

But using the form URL https://www.jotformeu.com/form/51835674307359  only did not present similar behavior.

--

Can you please try also re-embedding the form using its iframe publish code, but this time exclude the script part of the code.

Example:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/51835674307359" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> 

It is possible the script part is causing conflict as well. Let us test if its omitted how the embedded form behave.

Please let us know how it goes.

Hi, I've changed the URL and removed the script.  Works fine in Windows, missing bottom of the form on iPad.

Thanks,

Stuart

Hi,

Your form looks fine in my ipad simulator. The bottom is not cut off. Please see below.

Please try clearing your browser cache and form cache. Let us know if the issue still persists.

Looks fine in Windows, Android devices it is missing off the bottom but you can use the 'next' button to move down the field and iPad now looks like the attached....?

The issues are most likely caused by the website layout.

It looks like that the form placeholder element height is limited to 1895 pixels.

Please try to increase it to 3000 for example to see how it goes.

Is it not possible to have a vertical scroll bar?  It fits perfectly on Windows Explorer and therefore the form looks strange if extending to 3000 as there is a large blank space in Windows but then ok for Apple users? 

Please try enabling scrolling=Yes in the iframe embed.

Example:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/51835674307359" frameborder="0" style="width:100%;height: 1895px;border:none;max-height: 1895px;" scrolling="Yes"> </iframe>

Let us know how it goes.

Still fits perfectly on Windows Explorer Apple users do not get restricted by the 'max-height' command so instead of scrolling it shows the entire form.

Hi,

I just tested with an iPad simulator and here is what it looks like.

It fits the height and doesn't have a vertical scrollbar because the max-height of the form is 1895px while the actual height is 1865px.