iFrame Cutoff in Mobile

Hi there,

I'm totally stumped with the fact that my form appears fine in a normal laptop screen resolution but it gets cut off when viewing in mobile as below: 

I've had to increase the height to 5000px of the iframe to make sure it shows up fully on mobile but of course now there's a whole load of room at the bottom of the normal page:  

https://www.clearskyleds.co.za/planned-ppe-procurement-application

How can I make the iframe responsive so that it wraps the content of the iframe perfectly in the page regardless of the screen resolution? 

The code for the above link: 

<p><iframe id="JotFormIFrame-201944051119549" style="min-width: 100%; height: 5000px; border: none;" 

title="Planned PP Qualification" src="https://form.jotform.com/201944051119549" width="300" height="150" 

frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">

    </iframe></p>

<script type="mce-text/javascript">// <![CDATA[

var ifr = document.getElementById("JotFormIFrame-201944051119549");

      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>

Looking forward to any recommendations you might have. 

Thanks! 

Kind Regards,

Byron

Hi there,

Happy to help you today.

I would suggest you to use the scroll function instead if acceptable for you. Please use the following Iframe code to check it.

<iframe

      id="JotFormIFrame-201944051119549"

      title="Planned PP Qualification"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

      src="https://form.jotform.com/201944051119549"

      frameborder="0"

      style="

      min-width: 100%;

      height:1000px;

      border:none;"

      scrolling="Yes"

    >

    </iframe>

If this is not preferred then let us know.

Thanks

Hi there,

Thanks for this but yeah I'd prefer that they don't scroll in the iframe. 

The weird thing is that I have another form that works perfectly in both desktop and mobile resolutions...? See here: https://www.clearskyleds.co.za/hand-sanitizer-order-request

But I cant see what the difference is in terms of the code?

<p><iframe id="JotFormIFrame-201751743277053" style="min-width: 100%; height: 539px; border: none;" title="Covid-19 Form Upgrade" src="https://form.jotform.com/201751743277053" width="300" height="150" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">

    </iframe></p>

<script>// <![CDATA[

var ifr = document.getElementById("JotFormIFrame-201751743277053");

      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>

Thanks again and looking forward to your feedback.

Kind Regards,

Byron

May I know on which device are you checking the form on this page https://www.clearskyleds.co.za/planned-ppe-procurement-application?

I've tried it on iOS device and it doesn't show that it's cut off.

Looking forward for your response. 

Hi, 

As i mentioned above: "I've had to increase the height to 5000px of the iframe to make sure it shows up fully on mobile but of course now there's a whole load of room at the bottom of the normal page". 

How do I get it so that the form takes up only he amount of space needed regardless of what resolution? If you look at this page in a normal browser, there is a huge amount of space at the bottom to make sure that the form appears properly in mobile. 

Please advise.

Thansk! 

Byron

Greetings Byron.

You can add the following CSS directly to your website:

@media only screen and (max-width: 600px) {
  #JotFormIFrame-201944051119549 {
    height: 5000px !important;
  }
}

This will resize the height of the iFrame only if the user is on the phone.

Please note that add this CSS directly on your page, in the CSS file, or in the head tag, not in the form. 

Let us know if this solution works for you.