Docs

[glenmorrow]

Hi folks
Since updating to Gravity Forms 2 I’ve noticed that CSS related issues seem to be occurring like radio buttons text is appearing vertically and fields that were previously in two or three columns are now stacked vertically. I tried making the page one column but its still an issue.

WordPress, Cornerstone and X are all up to date as of this message, our site is svrc.vic.edu.au. The particular URL of the test form is here:
http://svrc.vic.edu.au/draft-page/

We’d (well “I”) would be VERY grateful if you could help me out.

Cheers, Glen

[Friech]

Hi Glen,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

/*** fix gravity forms css ready class **/
body .gform_wrapper .top_label li.gfield.gf_left_half,
body .gform_wrapper .top_label li.gfield.gf_right_half {
   float: none !important;
}

Hope it helps, Cheers!

[glenmorrow]

Hi!
Thanks for that. I’ve put that CSS in. THat’s resolved the gf_left_half and gf_right_half issue but the gf_left, right and middle third css still isn’t working. also the text next to radio buttons still seems cut off and doesn’t look right, For example the question that says ‘Does student Play a Musical Instrument?’.

http://svrc.vic.edu.au/draft-page/

I do appreciate your help!

Cheers, Glen

[Rad]

Hi there,

They are replaced by gf_left_third, gf_right_third and so on. It’s a recent change in GF, maybe it’s best if you’ll provide a mockup design of how it should be. Given by added class name, should it be 3 columns?

Thanks!

[glenmorrow]

Ok yes I see what you mean, I’ll try using those tags. Any thoughts on the radio buttons and why the text is either disappearing or vertical?

Cheers, Glen

[Rue Nel]

Hello Glen,

Thanks for the updates! There seems to be an invalid html code on the page. To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[glenmorrow]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for providing the information. I have checked your site and in order to resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#cs-content .gform_wrapper .top_label li ul.gfield_checkbox, 
#cs-content .gform_wrapper .top_label li ul.gfield_radio {
	display: block;
	width: 100%;
}

#cs-content .gform_wrapper ul.gfield_checkbox li, 
#cs-content .gform_wrapper ul.gfield_radio li {
    display: block;
    overflow: visible;
}

Hope this helps. Please let us know how it goes.

[glenmorrow]

Hi!
Ok that’s perfect! thank you! This means I can go live with a form tomorrow that work really wanted.

Now I just need to fix the issue with the gf_left_third, gf_middle_third and gf_right_third sections for where it asks for referrer. But I think I just need to use the CSS you gave first and change the gf_left_half and gf_right_half right?

So what changed? Ie, Gravity Forms has always worked fine for us, is it version 2 of GF or is it WordPress or X or a combination?

Cheers, Glen

[Rue Nel]

Hello Again,

To resolve the alignment classes, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media only screen and (min-width: 980px) {
  #cs-content .gf_left_third, 
  #cs-content .gf_middle_third, 
  #cs-content .gf_right_third {
    float: left !important;
    clear: none;
  }

  #cs-content .gf_right_third {
    margin-right: 0;
  }

  #cs-content .gf_left_third {
    clear: both;
  }
}

Please make sure that all of the elements using the middle_third class is visible. I have seen that some of it is hidden on the page which might not properly display the left, middle, right format.

Hope this helps. Please let us know how it goes.

[Author]

Posts