-
travelvillageAsked on December 1, 2015 at 6:55 AM
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?
-
victorReplied on December 1, 2015 at 9:50 AM
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.
-
travelvillageReplied on December 1, 2015 at 9:59 AM
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.
-
CharlieReplied on December 1, 2015 at 11:59 AM
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.
-
travelvillageReplied on December 1, 2015 at 12:09 PM
Hi
I followed your steps and once I re-embedded it using the script it seems to have worked.
Thanks for your help.
-
victorReplied on December 1, 2015 at 1:34 PM
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.