PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Forms running OVER my footer section, conflicting with information

  1. jessalouisa
    Member

    Can somebody help me to correct these problems ...

    On both pages of my forms (long forms) the form runs over the footer portion of the page and conflicts with the information there ... Will be difficult for the person filling out ... How can I fix/avoid this?

    http://exhaleinspirenow.com/reserve-your-appt/
    http://exhaleinspirenow.com/simple-online-intake-form/

    user: guest
    pwd: guest8448
    thank you

    Posted 11 years ago on Thursday June 16, 2011 | Permalink
  2. Your "left-area" div has an inline height being defined when the page is rendered. This is usually because there is an "equal height column" jQuery script that dynamically adjusts the heights of 2 or more columns on the page. This script is not adjusting the column height to accomodate your form properly. This often happens when you use this kind of script with conditional logic. The height script runs when the page loads, but the form height changes when certain fields change. The page doesn't reload so the height script can't recalculate and since the form is now taller than the specified height, the form overflows the vertical boundary and the footer.

    screenshot: http://grab.by/an1M

    If you disable the inline height property, the formatting fits in the content area properly without overflowing the footer.

    screenshot: http://grab.by/an2c

    In just a quick look, it appears that the script is located at the end of your theme's custom.js file

    var $et_left_area = jQuery('#left-area'),
    	$et_sidebar = jQuery('#sidebar');
    
    if ( $et_left_area.innerHeight() < $et_sidebar.innerHeight() ) $et_left_area.css( 'height', ( $et_sidebar.innerHeight()+15 ) );

    http://exhaleinspirenow.com/wp-content/themes/Modest/js/custom.js

    Since this is a theme issue, my suggestion is to discuss this with your theme provider and see what solution they suggest to solve the overflow issue.

    Posted 11 years ago on Thursday June 16, 2011 | Permalink
  3. jessalouisa
    Member

    Hi, thank you. I contacted theme first, who said it was a plugin/form issue ... Much of what you described is well over my head, but are you suggesting that I ask the theme if I can modify the custom.js file somehow ... some setting in there might help this to render properly? Thank you again. jessa

    Posted 11 years ago on Thursday June 16, 2011 | Permalink
  4. Yep, usually the first thing the theme providers say is that it's a plugin issue. We're used to that. The problem is that the script is setting a fixed height on the page and thus the theme is not flexible enough to handle dynamic content like your form.

    You can share the information I provided and they should understand it fine. It's not overly technical, but still a bit to get for somebody who's not a full time developer.

    I would ask about disabling that portion of the script and what effect that might have on the rest of your form layout. You may be able to create a new page template just for your forms that doesn't use the height script. Again, it's probably best to consult the theme provider on that since they're going to be intimately familiar with the theme and can offer the best solution.

    Posted 11 years ago on Thursday June 16, 2011 | Permalink
  5. jessalouisa
    Member

    OK thanks again, much appreciated.

    Posted 11 years ago on Thursday June 16, 2011 | Permalink