How to remove the scrolling bar when embedded on the website?

  • InjazLebanon
    Asked on July 22, 2016 at 3:22 AM

    Hello, 

    I would like to know if there is a way to remove the scrolling bar that appears when our forms are embedded on the website because it's a bit annoying. The forms are a bit long, that's why i guess the scrolling bars are appearing, however do you think there is a way to avoid it?

    Please find the links of the forms:

    http://www.injaz-lebanon.org/get-involved/volunteers/volunteer-form.html 

    http://www.injaz-lebanon.org/alumni/alumni/alumni-form.html (when you open the sections)

     

    Thank you so much!

    Best Regards

    Jotform Thread 888398 Screenshot
  • beril JotForm UI Developer
    Replied on July 22, 2016 at 6:21 AM

    Could you please re-embed your form as you see below:

     <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/53223485489464" frameborder="0" style="width:100%; height:auto !important; border:none;" scrolling="no"> </iframe> 
     
    At that time it will work properly. If this does not resolve the issue, please let us know and we will be glad to take another look.
  • InjazLebanon
    Replied on July 22, 2016 at 6:34 AM

    Thank you very much beril! we will try this and get back to you.

  • beril JotForm UI Developer
    Replied on July 22, 2016 at 7:53 AM

    You're most welcome. =) Feel free to contact us anytime. We will be happy to assist you.

  • InjazLebanon
    Replied on July 26, 2016 at 10:21 AM

    The style didn't work.
    We're unable to resize it with javascript since it's from another domain than our website. There are some libraries that can help us do that but they require that we place some javascript code on the embedded page. Is this possible with JotForm?

  • Boris
    Replied on July 26, 2016 at 11:28 AM

    I have checked both of the pages that you have linked to, and I see you were embedding the forms with the following codes:

    - http://www.injaz-lebanon.org/get-involved/volunteers/volunteer-form.html

    <iframe style="min-height: 1500px; width: 100%;" src="https://form.jotform.me/53223485489464" ></iframe>

    - http://www.injaz-lebanon.org/alumni/alumni/alumni-form.html

    <iframe style="min-height: 750px; width: 100%;" src="https://form.jotform.me/61793366059466" ></iframe>

    In both of these iframe codes, you are setting a minimal height to a number which is not enough to display the full height of your form. This is why the scrollbar will appear.

    1. If you want the scrollbar not to appear, please make sure that the height in your embed codes is set to be tall enough for your form to display in its entirety, such as 1840 pixels on your first page, and 1230 pixels on your second page.

    2. Alternatively to manually setting the height of your iframes, you may also want to use the embed codes that are presented within our Form Builder when you click on the publish button of your form:

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

    When embedded with the iframe codes our Form Builder provides, your form's iframe should be able to automatically resize itself based on how tall the actual form is.

    Please try either one of the above two solutions, and kindly let us know how it goes. Thank you.

  • InjazLebanon
    Replied on July 28, 2016 at 2:13 AM

    The embed code does the trick. Thank you so much!

  • liyam
    Replied on July 28, 2016 at 3:25 AM

    On behalf of the JotForm Support team, you are welcome :)

    If you have questions, please let us know.

    Thanks.