iFrame Cutoff in Mobile

  • Profile Image
    lightsavers
    Asked on August 05, 2020 at 02:44 AM

    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: 

    1596609375form.jpg

    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

  • Profile Image
    Vick_W
    Answered on August 05, 2020 at 04:49 AM

    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"

          onload="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

  • Profile Image
    lightsavers
    Answered on August 05, 2020 at 06:15 AM

    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

  • Profile Image
    Jed_C
    Answered on August 05, 2020 at 07:24 AM

    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.

    1596626603Dashboard - Google Chrome 2020

    Looking forward for your response. 

  • Profile Image
    lightsavers
    Answered on August 05, 2020 at 08:12 AM

    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

  • Profile Image
    Bojan_J
    Answered on August 05, 2020 at 08:20 AM

    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.