iFrame Resizing Custom CSS

  • Profile Image
    phonefixers
    Asked on February 27, 2017 at 04:35 AM

    My form looks perfect when its on the mobile using the form link but when embedding the form into my website using iFrame it resizes the heights of all the fields.

  • Profile Image
    Mike_G
    Answered on February 27, 2017 at 07:16 AM

    After checking your form (direct link) on a mobile phone (Android), I see that the issue in your screenshot is also present (not just when your form is embedded).

    To fix the issue, please remove the following CSS codes below in the CSS tab of the first Image Picker widget in your form.

    @media only screen and (max-width: 480px) {

    .divimg img{

        height: 65% !important;

    }

    }

    I hope this helps. Please feel free to contact us again anytime if you have other questions or concerns.

    Thank you.

  • Profile Image
    phonefixers
    Answered on March 02, 2017 at 03:12 PM

    this did not help.

  • Profile Image
    david
    Answered on March 02, 2017 at 05:56 PM

    Instead of using the oEmbed plugin to embed the form, use the actual iFrame code:

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    If that does not allow images to be sized properly on mobile when the form is embedded, we will be happy to have another look to see what is causing the height to be incorrect on mobile. 

  • Profile Image
    phonefixers
    Answered on March 09, 2017 at 03:11 PM

    i am using the iframe.

  • Profile Image
    david
    Answered on March 09, 2017 at 04:17 PM

    I checked your page and it looks like the plugin is still being used to embed the form:

    Remove the form and add in your iFrame code in with your pages code:

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

  • Profile Image
    phonefixers
    Answered on March 09, 2017 at 04:52 PM

    <iframe id="JotFormIFrame-70675637757471" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; 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>

  • Profile Image
    david
    Answered on March 09, 2017 at 06:06 PM

    That is your forms iFrame code, however, that does not appear to be what is added to the site.  If the website builder you are using does not accept scripts, try embedding the form without the script portion:

    <iframe id="JotFormIFrame-70675637757471" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; border:none;" scrolling="no"> </iframe>