Docs

[co50]

Hello,

Due to incompatibilities between Gravity Forms ready-classes and X-theme, I implemented the following CSS per your support rep many months ago:

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

It works great for the most part but I encountered an instance today where the theme is still messing with 3-column (thirds) Ready-Classes.

See this form: https://asthenisusa.com/pharmacists-application/

Find the Quality Service Skills section.

It is coded as follows:

Are you MTM Certified? [gf_left_half]
Please attach a photo of your MTM cert [gf_right_half] – appears when Yes to prior question

Ambulatory Care Residency [gf_left_third]
Name of Ambulatory Care Program [gf_middle_third]
Please attach a photo showing proof of enrollment [gf_right_third] – appears when other than No to prior question

For some reason, the Ambulatory Care Residency field appears in the right column of Are you MTM Certified? It should be on the next line, not on that line – regardless of whether the Are MTM Certified question is answered yet. In other themes, this works fine. Nothing wraps if hidden fields are not present. But with X in this case they do.

What is the proper CSS to ensure Ready Classes like this are respected?

Please make this a private message. Not sure why all support questions must be public. Incredibly bizarre and unprofessional.

Thanks.

[Lely]

Hi There,

Thank you for the screenshot and for detailed explanation. This issue is not coming from X customization. See this:http://screencast-o-matic.com/watch/cD6f1Fju5y > there’s no custom CSS coming from X.
What happens is, the field that contains this text:Please attach a photo of your MTM certificate* is set to have a clear:both; CSS property. This property clears the left position of the next element which makes it moves to the next line. Now, since by default, you have set this to hide, the clear:both will not be triggered. Since it is not triggered, the next element will not move to the next row/line. You can consult the plugin developer regarding this or we can make the those elements as block instead by adding the following CSS:

@media only screen and (min-width: 641px){
li#field_3_22, li#field_3_25 {
    display: block !important;
    clear: both !important;
}
}

Hope this helps.

[Author]

Posts