Why is my form truncated on smartphones.

  • Profile Image
    ezmobile4u
    Asked on August 17, 2015 at 01:39 AM

    The following form is truncated on mobile phone apps but not on desktop mode. Form is mobile enabled.

     

    EZ Appointment Request:

     

    Embeded form: <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotform.us/form/50806442254148" frameborder="0" style="width:100%; height:2306px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

     

  • Profile Image
    Sammy
    Answered on August 17, 2015 at 05:27 AM

    The issue seems to be the dive you have used to enclose the iframe, its height is lower than the iframe.

    You can add the auto height property to cater for width changes

    <div class="wsb-htmlsnippet-element" style="height:auto !important;">