How to get rid of scroll bars in embedded iframe widgets?

Hi there. I'm following this tutorial about how to integrate 3 forms into 1.

https://www.jotform.com/help/182-How-to-Create-a-Basic-Multiple-Payment-Form

Although i keep coming across the same issue brought up in the threads previously. I've added the overflow code to 

Hello @lucca.ferrarese - When embedding forms, you can hide the scrollbars if you inject some CSS into each form, which you are embedding:

body {

  overflow-y: scroll;

  overflow: hidden;

}

GUIDE: How-to-Inject-Custom-CSS-Codes 

Also, you can adjust the width and height of form elements via their Properties. Here's an example:

Please try that and let us know how it goes.

Hi there, 

Thanks for responding so quick. I've done the CSS code, and adjusted the width and height. I still have the problem! Is there anything else I can do. I've embedded the code from the main form it is embedded in here:

<iframe id="JotFormIFrame-200866962786370" title="2020 Alice Davies Hitchcock Medallion " onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/200866962786370" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-200866962786370"); 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) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); 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>

Lucca

Do you want us to check this form?

https://www.jotform.com/form/200863995635366

Have you embedded this form on any website?

Please confirm so that we can inspect it for you.

Thanks.

Hi Roneet, that would be amazing, if possible yes please! 

I've not embedded this anywhere live at the moment - can you do this through jotform? 

Hello @lucca.ferrarese - As mentioned, you have to inject this code below to the CSS tab of the form that you are embedding, which in your case, this form: https://www.jotform.com/form/200864072424349 

body {

  overflow-y: scroll;

  overflow: hidden;

}

Then set the iframe embed widget's dimensions like this:

This is how it will look like: https://form.jotform.com/200884261333956 

Please try that and let us know how it goes.

Hi JohnRex,

Thank you for getting back so quick, everyone has been very helpful in getting this solved. Is there any way you can copy the CSS code into this thread? I have tried and the scroll bars still do not seem to go away. Im adapting the CSS code in the Form Designer > Styles > Inject Custon CSS 

Lucca 

I went ahead and added the code to this form https://www.jotform.com/form/200864072424349 (embedded).

Then adjust the iframe embed widget's dimensions of your main form:

https://www.jotform.com/form/200863995635366 

Could you please try it on your end now? It should now be shown as intended.