Embedded form is being cut off

  • Profile Image
    oliverpowell
    Asked on March 19, 2017 at 12:03 PM

    Hi, my form is being cut off at certain browser sizes as attached. If you scale the browser window and type "Test" into the field, the drop-down is inaccessible.

  • Profile Image
    ashwin_d
    Answered on March 19, 2017 at 01:18 PM

    Hello oliverpowell,

    I did check your form and found that you have enabled "Mobile Responsive" attribute but you have used your form's script embed code to embed your form in your webpage. Please not that your form to be mobile responsive, we recommend to embed your form using its iFrame embed code. The following guide should help you how to grab your form's iFrame embed code:  https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    Do try it out and get back to us if the issue persists.

    Thank you!

  • Profile Image
    oliverpowell
    Answered on March 19, 2017 at 07:46 PM
    Thank you!
    I've changed to use iFrame code, but the same problem occurs and the form
    is getting cut off.
    ...
  • Profile Image
    ashwin_d
    Answered on March 19, 2017 at 11:01 PM

    Hello oliverpowell,

    Please us the following iFrame embed code (without the script code) and see if that solves your problem:

    <iframe id="JotFormIFrame-22633060159347" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/22633060159347" frameborder="0" style="width:100%; height:1112px; border:none;" scrolling="no"> </iframe>

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image
    oliverpowell
    Answered on March 20, 2017 at 05:34 AM

    Hi,

     

    Thanks, that doesn't seem to work either!

  • Profile Image
    oliverpowell
    Answered on March 20, 2017 at 05:43 AM

    Actually, now that's working, however, it's pushing all the content down. Before the embed element was collapsed, and only expanded when the form grew. Now the iFrame element is the total height and is just showing as white space.

  • Profile Image
    ashwin_d
    Answered on March 20, 2017 at 06:10 AM

    Hello oliverpowell,

    Glad to know that it is working for you now. 

    In that case, I would suggest you to please use the following iFrame embed code along with script code:

     <iframe id="JotFormIFrame-22633060159347" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/22633060159347" frameborder="0" style="width:100%; height:355px; border:none; min-height: 355px !important;" scrolling="no"> </iframe> 

    <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-22633060159347"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { 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; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

    See if that solves your problem.

    Thank you!