iFrame code on Wix site showing scroll bars

  • iMatter
    Asked on April 21, 2015 at 11:22 AM

    I've just embedded my jotform onto my wix website.

    The only problem, is that a scrollbar appears on the right side of the form, so when someone scrolls down on the page, the form moves up under some other text. I don't want the scroll bar there - the form is exactly how I want it - without the scroll bar.

    Here is the iFrame code (which was auto-generated by jotform - I haven't changed it at all). What do I need to do - so the scrollbar doesn't appear?

     

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51083483504149" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • iMatter
    Replied on April 21, 2015 at 12:04 PM

    I'm not sure exactly where to put the code you've suggested (not an HTML programmer). Can you be very specific for me, of where in the iFrame code this goes, and what it replaces, if anything?

    Thanks

  • iMatter
    Replied on April 21, 2015 at 12:17 PM

    OK - i did this - but it is doing the same thing. Scroll bar still appears and scrolls. Note that I did not publish this - just tried it in Preview mode.

  • iMatter
    Replied on April 21, 2015 at 12:58 PM

    Sure - the webpage link is in my initial submission - but here is another link to the page

     

  • iMatter
    Replied on April 21, 2015 at 1:25 PM

    I read the guide - and tried this but it didn't work. However, I wonder if I'm putting the Custom CSS code in the right place. There already custom code in the field already (Form Style tab - Inject Custom CSS Code). 

    Here is what the code is at the end of the field - where should your suggested addition go? I imagine before the Inspect Separator? Before or after the last "}"

     

     

    .form-checkbox-item input, .form-radio-item input { width: auto; } .form-collapse-table { margin: 0 5%; } } /* | *//*__INSPECT_SEPERATOR__*/

  • David JotForm Support
    Replied on April 21, 2015 at 2:07 PM

    Try embedding your form using the iFrame code minus the autoheight script at the end.  So replace your current code with just:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51083483504149" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>

    To see if that works.  It has for other users in the past.

    If it does not, let us know and we will be happy to have another look.

  • iMatter
    Replied on April 21, 2015 at 2:37 PM

    Nope - that didn't do it either. I copied the code you suggested and replaced the existing iFrame code that I had put in Wix - and it is still doing the same thing.

  • David JotForm Support
    Replied on April 21, 2015 at 2:41 PM

    You may need to increase the height of the area your form is being embedded to in Wix.  Here is another user with a similar issue:

    http://www.jotform.com/answers/420196-Is-there-a-way-to-disable-the-scrolling-in-a-form-in-my-Wix-website

    Since it does not appear as though the form is causing the scrolling, it may be your Wix page is the culprit.

  • iMatter
    Replied on April 21, 2015 at 5:22 PM

    OK - I increased the height - and that worked. Not exactly what I wanted, as it adds extra space that I'd rather not have. But I can live with it.

    Thanks

  • David JotForm Support
    Replied on April 21, 2015 at 5:51 PM

    I am glad to hear it worked.  You can also try decreasing the height of the iFrame.  In the first section of the embed code, you can adjust the height:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51083483504149" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>

    Making the frame shorter may allow for you to make the space the form is embedded to smaller without having the scrolling.

    If there is anything else we can help you with, let us know and we will be happy to assist you.