Form is cut off at Bottom for Mobile Devices Using an iFrame

  • enbpubliccampus
    Asked on November 21, 2016 at 9:45 AM

    If I use the provided Publish > Embed > iFrame in my code, my form is cut off at the bottom on mobile devices. I've tried different browsers with the same result.   How can I resolve this (entire code provided below)?

     

     

    <!DOCTYPE html> <HTML> <HEAD> <meta charset="utf-8"> <TITLE> Group Assignment Request </TITLE> </HEAD> <BODY> <iframe id="JotFormIFrame-62944337127156" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; 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); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } 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; } } </script> </BODY> </HTML>

     

     

    Page URL: https://form.jotform.com/63253789859173
  • KadeJM
    Replied on November 21, 2016 at 10:34 AM

    I see that you're having an issue with your form being cut off at the bottom of the page on mobile devices it seems.

    Please share a link to where you have it embedded so that we can investigate this issue to assist you better with resolving it if possible.

    Additionally, I would like to point out that it is possible to control the height within the iframe:

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

  • enbpubliccampus
    Replied on November 21, 2016 at 11:00 AM

    Changing the "height" had no affect on anything.  Here is a link you can go to:

     

    http://enb-jw.org/kh2fsreports/index.html

     

     

     

  • David JotForm Support
    Replied on November 21, 2016 at 11:51 AM

    I checked your page and the height is still quite short.  Try increasing the height until the full form is shown.  If you get to around 1500px in height and there is still no change, let us know and we will be happy to have another look. 

  • enbpubliccampus
    Replied on November 21, 2016 at 12:22 PM

    That helped to increase to 1500, however the "Submit" button is still partially cut off so the entire form is still not viewable.

     

    Form is cut off at Bottom for Mobile Devices Using an iFrame Image 1 Screenshot 20

  • David JotForm Support
    Replied on November 21, 2016 at 12:42 PM

    Try removing the auto height script from the embed code.  Use only this portion:

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

  • enbpubliccampus
    Replied on November 21, 2016 at 1:17 PM

    "Submit" button completely gone...disappeared below the limit of the screen.

     

    Form is cut off at Bottom for Mobile Devices Using an iFrame Image 1 Screenshot 20

     

    Although I'm thoroughly confused by "@media" tags, it's in the CSS of this form from a previous problem with fields.  Will using @media help this situation?????

  • KadeJM
    Replied on November 21, 2016 at 1:37 PM

    When I look at just your form on my iphone it appears to be working normally as it should even when testing the iframe further on my end.

    Form is cut off at Bottom for Mobile Devices Using an iFrame Image 1 Screenshot 30

     

    However, if you look at it in comparison to being on your website I'm actually seeing that's where this problem appears and on my end the form being cut off in is in a very different place.

    Form is cut off at Bottom for Mobile Devices Using an iFrame Image 2 Screenshot 41

    Have you tried setting your form as mobile responsive if not already to see if this helps any?

  • enbpubliccampus
    Replied on November 21, 2016 at 2:25 PM

    When I look at the form on MY iPhone, it looks worse than it does on my iPad mini...the "mobile responsive" selection did not help at all.  I cleared browsing data to ensure I was not looking at a cached version.  

     

    YES, it looks just fine when you link to it from a direct URL, but when it's embedded in a web page with an iframe is when it has the problem.

  • David JotForm Support
    Replied on November 21, 2016 at 3:37 PM

    Try changing your iframe scrolling attribute from "no" to "yes" that might help. 

    <iframe id="JotFormIFrame-62944337127156" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript">

    Change the highlighted no to yes and the full form should be accessible.

  • enbpubliccampus
    Replied on November 21, 2016 at 3:47 PM

    finally.

     

    .....that was a long, confusing one!

     

    Thanks, for hangin' in there David!

  • David JotForm Support
    Replied on November 21, 2016 at 4:51 PM

    Glad to hear it!  Very welcome.  Let us know if there is anything else we can help with.