Docs

[vaughnmercury]

After the gravity forms update, some of the style are not displaying correctly. On the bottom of the home page there is a small form that should display all items inline – the two field boxes and submit button.

http://ilesgolf.org/

This is the response that I got from Gravity Forms, but it didn’t work either

Richard replied
Jun 28, 1:58pm
Hi Michael,

I’m afraid the issue with the CSS Ready Classes is being caused by the theme which is including it’s own custom Gravity Forms stylesheet which is overriding the default styles:

http://ilesgolf.org/wp-content/themes/x/framework/css/dist/site/gravity_forms/renew.css?ver=4.5.2

Gravity Forms 2.0 does include a lot of style changes so the theme developer would need to update their custom stylesheet so it is compatible with those changes.

This rule inparticular is causing the layout issue with fields using the column classes:

https://www.dropbox.com/s/or2pqjs0pu11lam/Screenshot%202016-06-28%2018.56.32.png?dl=0

They are setting the float rule to left, Gravity Forms no longer uses floats for the CSS Ready Classes as they are bad for responsive design.

You’ll need to contact the theme developer to see if they have an updated version of the theme compatible with the new version of Gravity Forms.

In the meantime adding the following to the theme stylesheet should temporarily fix the issue:

body .gform_wrapper .top_label li.gfield.gf_left_third,
body .gform_wrapper .top_label li.gfield.gf_middle_third,
body .gform_wrapper .top_label li.gfield.gf_right_third {
float: none;
margin-right: 0;
}

[Paul R]

Hi,

I will forward this to our web development team for review.

For the meantime, to align your form inputs.

Add this in Custom > Edit global css in the customizer

.home .gform_wrapper li.hidden_label input {
    height: 44px;
    margin-top: 0;
}

Thanks

[hype]

I’ve been communicating with Gravity Forms Priority support as well due to all forms on our sites being misaligned after the update. They said the same thing:

… It looks like you have configured it correctly. It appears that your theme is outputting some styles for Gravity Forms specifically which are interfering with the CSS Ready Classes. I would recommend using our Debug add-on to test for conflicts without affecting any site visits:

https://www.gravityhelp.com/documentation/article/gravity-forms-debug-add-on/

[hype]

DELETED

[vaughnmercury]

Thanks, but I added this and it did not fix. It not so much messing with them lining up correctly, but it is making the fields really small and squished together. Look at the attached image that show before and after the gforms update. There you can see how it’s supposed to look.

[Rad]

Hi there,

There is no way for us to predict the CSS and class names that they will add to their next releases. I say it’s their update that breaks the standard used by most themes, and now, themes need to re-adapt another standard that is different from older one. Maybe it’s the reason we can’t add Gravity Form to our compatibility page yet, as it changes its standard more often.

Please add this CSS,

@media only screen and (min-width: 641px) {
.gform_wrapper .top_label li.gfield.gf_inline {
    width: 40% !important;
}
#field_6_5 {
   width: 10% !important;
}
#field_6_5 button {
margin: 12px 0;
}
}

Please also note that X theme doesn’t have any coding integration that alters form structure(eg. class names), what we include are just styling for it to be compatible. The fact that their class names are changed ( X added styling are now invalid ) is a proof that the change that breaks it is from their end.

Thanks!

[Manny Costales]

Hi, just add the code below on the Global CSS

.site .gform_wrapper ul li.gfield {
clear: none !important;
}

[Paul R]

Hi,

Glad you were able to figure it out.

Have a great day! 🙂

[technologymedia]

Thanks for uploading a before/after screenshot @mcostales84. I am having the same issue and have not yet resolved with the suggestions thus provided in this thread. Please update if you are able to resolve, I’ll do the same.

[Joao]

Hi There,

Would you mind providing your URL and pointing at the issue?

Thanks

Joao

[technologymedia]

This reply has been marked as private.

[Rad]

Hi there,

Would you mind providing a list of what you wish to fix? The above CSS is only applicable for that specific form. Since GF can be build and composed in different way, then CSS fix would vary too.

Thanks!

[Manny Costales]

I had to add these 2 classes to the Global CSS:

.site .gform_wrapper ul li.gfield {
   clear: none !important;
}
.gform_wrapper ul.gform_fields li.gfield {
	margin-right: 0 !important;
	float: none !important;
}

[Rad]

Thanks for sharing! That will going to be helpful 🙂

[Friech]

Hi There @technologymedia,

Regretfully, at this time I am not entirely certain what is the issue., your form looks fine. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[Author]

Posts