How can I enable scrolling or make the frame taller?

  • Profile Image
    brianfrankey
    Asked on February 22, 2019 at 11:30 AM

    When I embed my form in my website with iFrame, the form doesn't scroll in the iFrame.

     

    The heights of some of the pages in my form are taller than the frame and the user can't see all the fields or next buttons at the bottom.

     

    how do 

    1. get scrolling in the iframe

    2. make the frame taller? 

     

    Thanks

  • Profile Image
    david
    Answered on February 22, 2019 at 12:27 PM

    In the iFrame code there is both a height attribute and a scrolling attribute.  Either increase the value for the height, or change scrolling from "no" to "yes":

    <iframe id="JotFormIFrame-90523316257151" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/90523316257151" frameborder="0" style="width: 1px;
    min-width: 100%;
    height:539px;
    border:none;" scrolling="no">
    </iframe>

    Either of those should allow for the full form to become accessible.

  • Profile Image
    brianfrankey
    Answered on February 22, 2019 at 01:39 PM

    David, Thanks! that is getting closer but still at least one issue.

    The height was increased and scrolling activated, but whenever the NEXT button is clicked when the next page come ups my browser goes to the bottom of the iFrame.  The bottom of the browser is aligned with the bottom of the iFrame so the top of the form page is not visible as it is above the top of the browser window. It would be better if the browser remained justitifed to the top of my webpage which the iframe is in


    Thanks for your help!

  • Profile Image
    david
    Answered on February 22, 2019 at 01:56 PM

    Reducing the height of the frame with scrolling set to yes might resolve it.  Users would be able to scroll to the sections not able to fit the frame but the size of the frame wouldn't be so much that it causes shorter pages to load oddly.

    You can also try adding ?noJump to the form URL in the iFrame code:

    <iframe id="JotFormIFrame-90523316257151" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/90523316257151?nojump" frameborder="0" style="width: 1px;
    min-width: 100%;
    height:800px;
    border:none;" scrolling="yes">
    </iframe>

  • Profile Image
    brianfrankey
    Answered on February 23, 2019 at 03:26 PM

    Hi David. thank you for your latest response.  that did not fix issue.  


    My page scrolls to the bottom of the iframe when it loads.  what can i do to tell my page not scroll to the bottom of the iframe?


    Thanks

  • Profile Image
    jherwin
    Answered on February 23, 2019 at 07:31 PM

    I did check your web page on my end and I am able to replicate the issue you are having.

    I would suggest you remove the "onload="window.parent.scrollTo(0,0)" " code from your iFrame embed code and see if that solves your problem.

    <iframe id="JotFormIFrame-90523316257151" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/90523316257151" frameborder="0" style="width: 1px;
    min-width: 100%;
    height:800px;
    border:none;" scrolling="yes">
    </iframe>

    Give it a try and let us know how it goes.