Gravity form overlapping footer with Infinity Pro

[clairedj]

I setup a couple of multi-page forms using Gravity Forms on staravian.org.

On the 2nd of 3rd page the form overlaps the footer widget area. I have tried clearing the footer-widgets div using CSS, but it hasn't resolved the issue. I am hoping someone can help me figure out what is going on so I can resolve it.

I have found the issue occurs in Chrome, not Firefox. And sometimes it will look fine in Chrome, and others it won't.

I only get an overlap if I fill out the fields with a significant amount of text. I assume that accommodating & displaying the input text is what pushes the bottom of the form down into the footer.

I find that the overlap only occurs if the screen is sized at around 1033px wide.

Even when the screen is widget I have found that when I click Next and Previous on the form, I do see the form overlap the Footer Widget area temporarily.

Does anyone have any ideas on how to fix this issue?

https://staravian.org/surrender-bird-st-louis/surrender-application/

[clairedj]

I created a staging site which is here: http://staging.productive-thought.flywheelsites.com/surrender-bird-st-louis/surrender-application/

Login is studiopress / studiopress

I deactivated every single plugin except for Gravity.

I replaced the 2 Infinity Pro theme files that were edited with the original theme files - style.css and functions.php

I then tested the form again on the link above. It still overlaps the footer.

I find the overlapping occurs at 1033px wide and when I click on "yes" to the radio buttons because that opens up another field and expands the content area (thus pushing the footer area down).

I also found it only overlaps when there is a sidebar. If the page is a full width page, there isn't an overlap.

I switched to the Twenty Seventeen theme and the form worked fine. When I click on "yes" and another field appears, the content area would expand and thus the footer area would be pushed down further so there wasn't an overlap.

[carasmo]

This is due to the matchHeight jquery plugin. The default is set to height, so when a height is changed via another script, then it will have the overlap since a resize is not being triggered.

*Open the global.js file in a code editor. Add the option for property as per the instructions on MatchHeight https://github.com/liabru/jquery-match-height

Before:

jQuery(document).ready(function($) {

	// Match height for content and sidebar
	$( '.content, .sidebar' ).matchHeight();

});

After changing to min-height.

jQuery(document).ready(function($) {

	// Match height for content and sidebar // changed to min-height.
	$( '.content, .sidebar' ).matchHeight( {
    	property: 'min-height'
	} );

} );

Next open up your functions file in a code editor and find the constant CHILD_THEME_VERSION change the version of the theme to

Before
define( 'CHILD_THEME_VERSION', '1.0.0' );

After
define( 'CHILD_THEME_VERSION', '1.0.1' );

The last part is to clear the cache. When you make changes to CSS or js, you should bump the version number so that the browser will dump the stored files.

*Assumes FTP and code editor. Attempting to edit php and jquery files by other means is risky.

---

Genesis Theme Customization and Help

[Author]

Posts