-
production10mmAsked on January 18, 2018 at 6:05 PM
I've tried just about everything I can think of to get this jotform to be responsive, but no matter what when I size down the page below 460px wide it cuts off half of the form with no option for a scroll bar.
Whats odd is that if I enter the form and hit "tab" then it will scroll through the form just fine, but I cant touch and drag it or scroll through it
please advise
-
John_BensonReplied on January 18, 2018 at 8:38 PM
I checked the page URL using my iPhone 6s plus and I was able to replicate the issue.
Please try re-embedding the form using this guide: https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page
Let us know how it goes.
Thank you.
-
production10mmReplied on January 19, 2018 at 9:26 AM
I re-added the form first using the standard Js embed code, then the iframe embed code (both solutions ive tried already) and the problem persists. Then I went to "platforms" and tried wordpress.org, no luck. Wordpress.com's made-up [embed][/embed] tag code, however, provided a working fix as you can see below:
But I cant say im totally satisfied with the way this looks. Can you advise on how this could look better, not adjust its width and height so heavily, while retaining this scroll bar?
~thanks
-
TREVONReplied on January 19, 2018 at 10:58 AM
Thanks for letting us know you found a solution to the embed issue. Just to understand you better do you need to retain the scroll bar or you want to remove it?
This is because the reason scroll bars appear is because if a web page is bigger than the allocated display error then scroll bar will need to appear to simplify navigation.
Also I have seen that the illustration you have use is the control panel display where you can easily adjust the size of the embedded form and it will replicate the same dimensions in the front end.
-
production10mmReplied on January 19, 2018 at 11:05 AM
I want the scroll bars when they're necessary. What im mostly focused on is the weird spacing at these different responsive sizes. From left to right, why isnt the vertical used, why is there this gray box, why is there this gray box?
~thanks!
-
Nik_CReplied on January 19, 2018 at 12:20 PM
If it is possible, please try editing the embed code you used and set the height to be 655px:
You could also try with this code:
<iframe id="JotFormIFrame-61035926824154" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/61035926824154" frameborder="0" style="width: 1px; min-width: 100%; height:655px; border:none;" scrolling="yes"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-61035926824154"); 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[(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; } 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>
I adjusted the height and scrolling there.
Let us know if that worked.
Thank you!
-
production10mmReplied on January 22, 2018 at 2:23 PM
That bundle of code worked wonderfully, thank you very much!
-
John_BensonReplied on January 22, 2018 at 2:25 PM
Thank you for updating us. We're glad that the issue has now been resolved.
On behalf of my colleague, you're welcome. Feel free to create a new thread if you need further assistance.