Form not displaying properly when viewed on iPad 4 Mini in landscape

When I turn my iPad from portrait to landscape or visa versa the form starts flashing like it cant decide what width to be! It works fine on an iPhone.

I have the Mobile Responsive Widget installed too.

Any ideas?

Sorry for this inconvenience. I have just tested your form in my iPad (first generation) and in online simulators. I was not able to replicate the issue you are having. If you are still experiencing this issue, please let us know and we will be glad to take another look.

Hi

Yes i'm still having the issue, i'm using an iPad mini 4.

When you view the form in portrait it looks perfect, but once you turn the screen to landscape it starts flashing and you cannot use the form at all.

I was able to replicate the problem, however, it seems like it is related to the scripts in your form that auto resizes the iFrame.

 

Could you try the following instead:

1. First, remove the mobile responsive widget and make your form responsive by following this guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

 

2. Try re-embedding your form using the default embed script, I see you are using the iFrame embed code.

 

3. If the default embed script does not work for you, you can use the iFrame embed code again, BUT we will remove the script code that was included on it.

Example:

This is my iFrame embed code.

    <iframe

      id="JotFormIFrame"

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

      allowtransparency="true"

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

      frameborder="0"

      style="width:100%;

      height:786px;

      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;

        }

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

 

I will remove the script code included on it, in this case, it's the code highlighted bold above. The final code would be something like this:

    <iframe

      id="JotFormIFrame"

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

      allowtransparency="true"

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

      frameborder="0"

      style="width:100%;

      height:786px;

      border:none;"

      scrolling="no">

    </iframe>

 

However, the iFrame won't be mobile responsive anymore if we do this. Please also note that you need to adjust the height value to match the form's length.

 

I hope any of the above solution works.

Hi

I followed your steps and once I re-embedded it using the script it seems to have worked.

Thanks for your help.

On behalf of my colleague, you are very welcome. If you have any other question or issue, please do not hesitate contacting us. We will be glad to assist.