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

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

Please use this CSS codes and inject it to your form. This should fixed it.

iframe#customFieldFrame_68 {

    height: 135px !important;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

Example:

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. 

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" onDISABLEDload="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.

Beautiful. It works perfectly.