Scroll bars are appearing on an embedded form

  • Profile Image
    mgcaledonian13
    Asked on August 07, 2015 at 07:01 PM

    Up until recently the option to have scroll bars never worked although I had set it to "yes", really as an experiment to see how it affected the form, I did not need them so I left it as, it was at "No"

    Then today I got a message that the page was only showing the top part of the form went into the code and tried the sizes with no effect, then I thought that setting scroll bars to "yes" would maybe do something and it did, solved the problem.

    So, why all of a sudden do I get the scroll bars to work, I did not need them before as the site page scroll bar did the job for me.

    I have an "older generation" accessing this site and double scroll bars might confuse the less Computer literate, can I get this back to scrolling with the site page scroll bar?

    Willy Scott       

  • Profile Image
    Boris
    Answered on August 08, 2015 at 01:21 AM

    Hello Willy. It sounds like an issue regarding a form that is embedded on your website, so could you please give us the link to the page where it is embedded, and we will be happy to take a look into what may be wrong.

    Without seeing the page and the form in question, there is not much that we can do to troubleshoot. If you are using our iFrame embed method, you can try removing the script part of the embed codes. That is because the script part tries to resize the iFrame according to the size of the form inside, and if it is incorrectly calculating the form height - it would be setting the iFrame height incorrectly as well.

    From the following example code, I have marked in orange the script that you would need to remove on your website:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/1234567890" frameborder="0" style="width:100%; height:1500px; 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>

    When the script is removed, you will also be able to change and adjust the height directly in the iFrame embed code - marked with red bold text in the example above. You can try increasing this height, and see if your form is then long enough for the entire form to be seen.

    Please let us know how it goes, and if the issue persists, please let us know the link to the page where you have embedded this form. Thank you.

  • Profile Image
    mgcaledonian13
    Answered on August 08, 2015 at 02:56 AM

    Boris

    Thanks job done. Why did I not think of that.

    May I say for about the 100th time probably, you are all a fantastic support team, you could teach a few support teams a thing or two.

    Take the rest of the day off !! 

    Willy 

  • Profile Image
    Welvin
    Answered on August 08, 2015 at 10:13 AM

    Hi Willy,

    On behalf of my colleague, you're welcome. And it's our pleasure assisting throughout this support forum. Please contact us again if we can help in any way.

    Thank you.