[mjatersolParticipant]

We’re experiencing some minor issues with the X theme (version 4.6.4) not playing well with Gravity Forms (version 2.1.2) – specifically, the label for checkboxes on a form are below the input and not inline (screenshot attached). Additionally, the “CSS Ready Classes” don’t seem to be functioning properly.

The URL for the form in question is https://smiaware.com/products/request-sample-reports/.

I’ve seen similar issues with radio buttons mentioned in the forum, but haven’t been able to successfully resolve our issue using modified versions of those solutions. Thanks in advance for your assistance!

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li {
     margin: 0;
}
body .gform_wrapper .gfield_checkbox li input {
    float: left;
    margin-right: 5px;
}

Hope it helps

Joao

[mjatersolParticipant]

That’s great; the labels are now aligned with the checkbox inputs, but I’m still experiencing issues with the “CSS Ready Classes.” Perhaps that has something to do with additional custom CSS to remove the bullets (screenshot attached)?

[mjatersolParticipant]

More specifically, “gf_list_4col” still isn’t working.

[FriechModerator]

Hi There,

Would you mind pointing us your 4 column form, we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[mjatersolParticipant]

The URL is https://smiaware.com/products/request-sample-reports/. The section that I would like to use Gravity Forms’ 4 Column layout is the section called “Samples Requested.” Thanks to Joao’s assistance, the labels are now next to the checkboxes, but they still aren’t utilizing the CSS Ready Classes (screenshot attached) and are in a single column instead of four separate columns.

Thanks again for all of your assistance!

[JadeModerator]

Hi there,

Please add this code as well:

#input_4_7 li {
    float: left;
    width: 25%;
}

Hope this helps.

[mjatersolParticipant]

That’s fixed it; thanks! For good measure I added a margin on the bottom so that it was consistent with the rest of the form:

#input_4_7 li {
  float: left;
  width: 25%;
  margin-bottom: 1em!important;
}

[JadeModerator]

You’re welcome. 🙂

[Author]

Posts