Embedded form is being cut off

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.

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!

Thank you!
I've changed to use iFrame code, but the same problem occurs and the form
is getting cut off.
...

Hello oliverpowell,

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

<iframe id="JotFormIFrame-22633060159347" onDISABLEDload="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!

Hi,

 

Thanks, that doesn't seem to work either!

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.

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" onDISABLEDload="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!