What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

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

    Asked by rbroadfo 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. 




    Page URL:

  • Profile Image

    Answered by rbroadfo 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

    Answered by Boris 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

    Answered by rbroadfo on September 09, 2015 at 10:21 PM

    Beautiful. It works perfectly.