Issue with Gravity Form CSS ready classes on Pro

Support
#1

I’m trying to use CSS Ready Classes in gravity forms for columniation but it seems that the theme is overriding.

Is there a best practices for this?

Is there a CSS plugin for Gravity forms that is recommended? Any help is appreciated.

#2

Hello There,

Thanks for writing in! Please keep in mind that there is a built in Gravity form styles in Pro. If you do not want this and will just make use of the default gravity form styles then add this code to your child theme’s functions.php to stop X’s gravity form CSS from loading

add_action('init', 'no_x_gravity_form_css', 9999999);
function no_x_gravity_form_css () {
  wp_dequeue_style( 'x-gravity-forms' );
}

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

#3

Thanks for your response! Where can I find the built in Gravity form styles in Pro?

#4

Hi There,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

The Gravity form styles in Pro files are located under /pro/framework/css/dist/site/gravity_forms/ directory.

Cheers!

#5

Hi! I have the same issue. Gravity Forms should be able to accept CSS Ready Classes, especially for being able to use Halves and Thirds, which allow placing form fields in the single line. (without writing own custom CSS).

I am using X, not Pro, and have tried to use the script above. It has no effect. The form fields are still stacked one on top of other.

Is the script different for X?

Anyway, if there is anything in X that prevents native Gravity functionality to work properly, it should be removed, in my opinion. All Gravity Classes should work as intended by author.

Thanks!

#6

Hi there,

The code for the X is the same and it will remove the Gravity Form specific CSS code of the X Theme. But make sure that you clear any cache that you might have.

If you still have problems please open up a new thread and send us your website login credentials to follow up. Do not add the login info here as the Secure Note feature of the post is visible to the original poster of the thread.

Thank you.

#7

I have the same issues in Pro. The code does not remove the styling issues. Can I put a secure not here or will the topic creator see it as well?

#8

Hey There,

At this time, I would highly suggest that you open your issue in a new thread. This is to make sure that only you and our staff can see your secure note because if you post it here, the original poster can see that secure note as well.

Thank you for your understanding.

#9
#10

Hey There,

I already responded your thread.

Please check it out here: https://theme.co/apex/forum/t/gravity-form-css-ready-classes-on-pro-not-working/27095

#11

Theme Improvement Suggestion:
The following CSS is needed to restore columns in Pro for gf_list_2col. Essentially, the display needs to be forced to inline-block instead of list-item. Anyway that can be updated in the theme to prevent from having to add this to each individual form??

@media(min-width: 641px){
	.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li{
    display: inline-block !important;
  }
}
#12

Hi @hollandwebdevelopment,

Thanks for your suggestion, I will surely forward it to our development team for further process.

Thanks

#14

I used the code suggested by @hollandwebdevelopment after the update to v4.0.x to resolve the issue that suddenly showed up after the ready made classes had been working forever. I agree that this needs to be addressed by Themeco at more fundamental level for version 4 and beyond. This problem showed up suddenly
after updating and is causing issues on multiple sites. Upgrading the theme should not break something like this.

I added some extra code for 3 and 4 columns as well:

@media(min-width: 641px){
	.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li{
	display: inline-block !important;
  	}
  	.gform_wrapper li.gfield.gf_list_3col  ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li{
	display: inline-block !important;
  	}
  	.gform_wrapper li.gfield.gf_list_4col  ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li{
	display: inline-block !important;
  	}

}

Please forward these concerns to the Dev team for review ASAP. This should not have happened but I am sure you guys can work a solution into a point release soon.

#15

Hi @simeoned,

Thanks for your suggestion for fixing the column 3 and 4. My colleague already submitted a ticket to our developers and hopefully, they will able to queue this on the point release soon.

Thank you.