Issue with Conditional Logic Display « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Stéphane Bergeron
Member

Hi,

Continuing work on my multisite project, I'm running into a display problem with the display of a form with conditional logic.

If you look at the page which is the main blog page in a site on the network, you'll see a form in the sidebar:

http://aapars.com.s94903.gridserver.com/site-gabarit/blogue/

I use the form for comments and, optionally, subscribing to the site. If the user checks the box labelled "Je veux m'abonner" (I want to subscribe), then 2 additional fields are shown below it through conditional logic (username and password).

The problem is that, as the two fields are shown, the sidebar/column does not grow to accomodate it and elements of the form slide over the footer.

I'm usually good at troubleshooting this kind of issue but I've been at this too long today and cannot figure it out. I would appreciate any pointers.

The site's theme is Headway 2.0.6 and that page uses a 2 columns layout in Headway.

Thanks!

Update (12:48am EST):

I just noticed that RC2.1 was out and I updated my install to that. Something must have changed in the GF CSS because, now where I have 2 text fields side by side (Name and password with confirmation), the fields seem to be bigger and there's no longer any space between them and the right field is cut off. That probably wouldn't be a problem on a regular page but that form is in a sidebar that is narrower than a regular page content column.

Posted 13 years ago on Thursday December 16, 2010 | Permalink
Kevin Flahaut
Administrator

This is a theme issue, and not a Gravity Forms problem. The form is working as intended.

The problem is that there is an inline height rule being applied to column 2 - most likely from some jQuery script that equalizes the column heights on the page load.

screenshot: http://grab.by/7VwG - notice the "height:1027px" inline style

When the form conditional logic is triggered, the content expands just as it should, but the containing div element in your theme has a set height and the form overflows the vertical boundary. The page is never refreshed, thus the column heights aren't re-calculated to fit the new form dimensions.

I would consult with the Headway support team to see if they can suggest a fix. I'm sure they've probably encountered this or something like it before.

Just one final thought.. a low-tech solution might be to add a suitable bottom margin/padding to the form to allow for the expanding fields.

div.sidebar li.gform_widget {margin-bottom:100px}

test screenshot: http://grab.by/7Vxc

Posted 13 years ago on Thursday December 16, 2010 | Permalink
Stéphane Bergeron
Member

Thanks very much for the very quick response Kevin! you are quite right and wow! I should have seen that... Goes to show that sleep deprivation is bad for the brain ;) If I enable "Disable Equal Column Heights" in the columns section of Headway's Visual Editor, the issue goes away immediately. I'll just have to set my background images differently to keep the same look. Thanks again!

I'll look at the other issue (update in my initial post) more closely tomorrow as I need to sleep a little longer tonight...

Posted 13 years ago on Thursday December 16, 2010 | Permalink
Kevin Flahaut
Administrator
Yes, there are some CSS changes in RC2 to improve field alignment with the new "ready classes" along with a few other things.

Try adding this for your form, it should fix you up.
```
body .gform_wrapper span#input_3_7_1_container.ginput_left,
body .gform_wrapper span#input_3_4_3_container.ginput_left {width:45%}
body .gform_wrapper span#input_3_7_2_container.ginput_right,
body .gform_wrapper span#input_3_4_6_container.ginput_right {width:45%; margin-right:8px;}
```
test screenshot: http://grab.by/7VxW

Dormez bien.
Posted 13 years ago on Thursday December 16, 2010 | Permalink