The form only shows half on some Macs / OS X / iPads

I have a problem with my form not showing up on some Macs / OS X / ipads. After I have used the embed-method for my joomla site until now, I read about the iframe-workaround for my problem.

So I updated Joomla (3.4.3), installed Sourcerer (5.0.2) and updated my Module with the iframe-Code (replaced the embed-code). After this unfortunately the form only shows half.

After checking CSS I can see height of my form is set to 180px. But in the code I pasted into Sourcerer it states this:

style="width:100%; height:2064px;

What I am missing?

Thanks a lot!

A possible conflict between the script part of the iframe codes and your website script is causing the problem to happen. In this case, remove the script part and see if that will resolve your problem. 

Here's an example:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/1234567890" frameborder="0" style="width:100%; height:675px; 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>

You have to remove the codes that is highlighted with Yellow.

Thanks

Thanks a lot for your quick answer. Unfortunately this did not solve the problem. I only used iframe-part of the provided code of my form (without the script part). And still my form is only displayed half.

The real problem is that parts of the form don't show up on OS X / Macs. So I tried to use the recommended iframe method. But as there are so many people which can not solve there problems with iframe, maybe there is another solution ? Or a new way to get the iframe-thing working on newer joomla installations (3.4.x) ?

As we have a production site I now had to switch back to the old mehtod (embed for joomla). form is working now on Windows / Mac OS X together with IE and Firefox. So now I think it's more like browser-specific problem. You can see it in the screenshots below: form shows on Firefox and Internet Explorer on all platforms (Win and Mac). But does not show in Chrome and Safari - also on all platforms: Windows, OS X, iOS and even Android.

Screenshots of our form (embed method) with different browsers / platforms:

https://www.browserstack.com/screenshots/f9a7f0f8e825422f47edff8d3be641686f307b2c

And of course  I tested it in real life on a MacBook Pro. Same result in Safari. Also not working: Android 4.2.2 and Chrome browser...

Any ideas ?

Thanks a lot for your help !

So, to get closer to the problem I just made some plain html-files (and uploaded them to a dropbox) and pasted the embed and iframe-code:

iframe version of our form: https://dl.dropboxusercontent.com/u/6939968/formtest_iframe.html

embed version of our form: https://dl.dropboxusercontent.com/u/6939968/formtest_embed.html

On my system Win7 64bit the iframe form only shows partly...

Your iFrame code still has the script to resize the form:

This is the script my colleague was suggesting to remove.

Delete that line from <script> to </script> and see if that helps.  It should allow you to manually set the height of the frame.

Thanks a lot for your answer, I already tried this on the production site. But first it did not solve the issue. I gave it another try now and after cleaning really all caches (browser, joomla, etc.) it solved my problem. Form displays full now on all devices and platforms - as far as I can see.

Thanks a lot for your fast support!

Screenshots: https://www.browserstack.com/screenshots/ad0d819ffa9affbf344225a925623253aea1cfb0

topic closed :)

Glad to hear you were able to get things sorted.  If there is anything else we can assist you with, let us know and we will be happy to help.