driving distance widget cut-off AND custom CSS not fixing it

  • Profile Image
    rbroadfo
    Asked on September 09, 2015 at 10:58 AM

    Hello. The driving distance widget is hiding the calculate button after the address is inputted. I tried a suggestion from a different thread of injecting custom CSS:

    #customFieldFrame_35 {
      height : auto !important;
    }

    The problem continues after that change. I have the form embedded on my webpage http://www.bigsmilescompany.com/nonpeak-under-20-kids.html

     

    Any help appreciated. 

     

    Ryan

     

  • Profile Image
    rbroadfo
    Answered on September 09, 2015 at 03:23 PM

    You guys are great. That worked ... for the most part. I have two parts of the form shown based on conditions of the travel distance. For example, when you type in "London, ON, Canada" it will bring up the second part. The "check availability" button is then gone. It's a page break button. 

  • Profile Image
    Boris
    Answered on September 09, 2015 at 07:10 PM

    Thank you for your kind words.

    I can see the issue with the form resizing and the Next button (Check Availability) being cut off. The problem comes because the form is always trying to resize itself to fit all of its content, but it is not detecting the Driving Distance widget's new size - the one we have set as 135px.

    Since there is visually plenty of space left on your page under the form, we can make sure that your iframe is always tall enough to show the Next button, by adding a min-height:900px; to your iFrame embed code on the website.

    Your embed code would need to be changed into this:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/50274139754256" frameborder="0" style="width:100%; height:1666px; min-height:900px; 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);}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>

    This will make sure that your form is always at least 900 pixels tall, which seems to be enough for this button to not be cut off. Please try it out, and let us know if you need any further assistance. We will be happy to help. Thank you.

  • Profile Image
    rbroadfo
    Answered on September 09, 2015 at 10:21 PM

    Beautiful. It works perfectly.