Form Will Not Scroll In Safari - Can't find a definitive fix

  • Profile Image
    locomotivedisplaycases
    Asked on March 03, 2016 at 02:03 AM

    I know this has been asked before and various css workarounds offered, but no matter what solution I look at, I am unable to get my form to scroll on an ios device. However when viewed in chrome the form scroll bar is there.

    For example I have tried injecting @media screen settings but all this does is alter the form layout, I tried altering scrolling to "yes" or "auto" altering form lengths etc, I removed iframe css variables as mentioned on a previous forum post again with no success. 

    I have looked on other sites such as stack overflow etc but cannot find a fix, as this topic seems to be a minefield of answers - please can you help with a solution?

    Thanks David

  • Profile Image
    Boris
    Answered on March 03, 2016 at 06:02 AM

    As you have said iOS devices, I have first checked your form on iPhone, and it is scrolling without any issues there:

    However, I see the problem with your form scrolling on desktop browsers and on tablets, including iPad Air - the form is simply cut off and cannot be scrolled down to the submit button.

    The issues comes from the peculiar way the form is embedded there - you first have an iFrame that has a set height of 800 pixels, and our form is then embedded with our iFrame embed method inside that 800 pixel iFrame.

    It goes like this: webpage (entire screen) > 800px iFrame container > our form's iFrame container > form.

    The iFrame in between your main page and our form's iFrame is causing some issues, as it appears to the form that the entire webpage is that 800 pixels. If you are using a visual website builder, they usually name such option as adding a "box" to your website, which will add such an unnecessary iFrame.

    Our embed code should be added directly to the main website for best experience. So if you have control of the design on your website, please make sure to paste the full iFrame embed codes directly to your website - and not inside any other iFrames or boxes.

    http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code

    Please let us know how it goes.