White space on mobile where script is?

  • Profile Image
    YardKit
    Asked on October 05, 2017 at 07:11 PM

    Hello, my form (embedded via iframe into squarespace) looks fine on desktop but leaves a large white gap at the bottom on mobile.

    I played around with @media css to no avail; removing the script at the end of the code reduced the space but also cut off the 'submit' button, so I think that's the conflict. Can you help?

  • Profile Image
    Nik_C
    Answered on October 06, 2017 at 01:52 AM

    I see you tested on iPhone. I tested on iPhone on Safari, but I wasn't able to replicate this issue, the gap below the form is normal:

    Were you able to fix this issue or is it still persist for you?

    Please let us know.

    Thank you!

  • Profile Image
    YardKit
    Answered on October 06, 2017 at 12:00 PM

    Hi Nik, still having this issue on the devices I'm testing:

  • Profile Image
    Nik_C
    Answered on October 06, 2017 at 12:28 PM

    Could you please tell us on which devices did you test so we can try to replicate this issue?

    We'll wait for your response.

    Thank you!

  • Profile Image
    YardKit
    Answered on October 06, 2017 at 12:43 PM
    iPhones 6 and 7.
    ...
  • Profile Image
    Nik_C
    Answered on October 06, 2017 at 01:51 PM

    I'm testing on iPhone 7 as well.

    The issue is that I'm still unable to replicate this issue, and I tested on Safari and Chrome. 

    You could try inserting the below CSS in your Squarespace:

    iframe#JotFormIFrame-72708053905154 {

        margin-bottom: -20%!important;

    }

    Here is how: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor

    That should bring the bottom margin up, now that could interfere with how the form would show on other devices.

    And, again, it is showing fine on mine.

    Please let us know if that worked.

    Thank you!

  • Profile Image
    YardKit
    Answered on October 06, 2017 at 06:43 PM
    That helped a bit but there's still a block of white space on my screen
    (cleared the browsing data, too, just to be sure). Glad to know not
    everyone will see it this way. Let me know if there's anything else that
    might work.
    [image: Inline image 1]
    ...
  • Profile Image
    liyam
    Answered on October 07, 2017 at 01:22 AM

    Unfortunately, the image that you have attached failed to show up here in the forum. You can follow this link and post the image screenshot here: https://www.jotform.com/answers/1266209

    But if you are referring to the whitespace below the submit button, you can modify the CSS of your page (squarespace) and use this code:

    #block-yui_3_17_2_7_1507240461229_15309 {
         height: 2px;
    }

    You can further adjust it with CSS that you know in relation to spacing such as setting tha padding and margins, etc.

    Feel free to let us know if you have questions.

  • Profile Image
    YardKit
    Answered on October 07, 2017 at 06:43 PM
    Hello, a friend just alerted me to another issue with my form, which is
    that it's not showing the results. The form has conditional responses and
    is embedded as an iframe in my homepage to show the results immediately,
    without leaving the page. www.yardkit.com
    [image: Inline image 1]
    Ideas of what might be going wrong here?
    ...
  • Profile Image
    EltonCris
    Answered on October 07, 2017 at 08:51 PM

    Your form worked for me as well.

    However, when I tried different iOS versions and browsers, I was able to see the gap below the form.

    Please try these fix.

    1. Re-embed your form using the following iframe embed code with a maximum iframe height so it does not create huge space below the form.

    <iframe id="JotFormIFrame-72708053905154" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/YardKit/is-yardkit-right-for-you" frameborder="0" style="width: 1px; min-width: 100%; height:539px; max-height:600px;border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72708053905154"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); 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); } </script>

    If the above solution does not work, try this.

    1. Take your iframe embed code again then append this before embedding it on your website.

    <style>@media screen and (max-width:480px){#JotFormIFrame-72708053905154{height:600px !important;}}</style>

    Hope any of these helps. Thanks