Styling issue with Gravity Forms & image choices

[njbentley1]

Alrighty, so I’ve been everywhere trying to find a solution to this and haven’t quite yet been able to discern exactly what is going wrong.

Problem

I’ve got a Gravity Forms add-on installed that turns the traditional radio buttons into image choices. With a recent update to Pro, those image choices went from being horizontal options to vertical options.

What I’ve done so far

1. Killed all of the plugins on my WP install aside from the main Gravity Forms & Image Choices add-on.
2. Spun up an entirely new WP install & freshly installed Pro, Gravity Forms, & Image Choices add-on.

What I’ve been able to verify

1. Doesn’t appear to be a caching issue, since the new WP install isn’t cached at all.
2. Doesn’t appear to be a Gravity Forms / Image Choices issue, since the radio image choices do display correctly in other themes.

In conclusion

I realize that this might fall a bit out of the scope of support for Pro, but I would appreciate any help. I think it’s likely due to a CSS change in Pro, specifically surrounding the way those radio buttons are displayed. But I could be entirely wrong. I’ve included a screenshot of the behavior below & another screenshot of the correct behavior.

Incorrect:

Correct:
(dropbox link since I’m only permitted to put one image per post)

Edit: dev site is here: https://dev-wp.merus.io/test-form. It’s currently set to the Pro theme so you can see the incorrect behavior.

[njbentley1]

Alright I think I’ve narrowed down where this is happening.

Something within the integrity css. Getting rid of display: flex; fixes it, but I’m not sure how I should go about that correctly. If you inspect the < li> tag that renders the radio button, you’ll see the below css.

body .gform_wrapper ul.top_label li ul.gfield_radio li, body .gform_wrapper ul.top_label li ul.gfield_checkbox li, body .gform_wrapper ul.left_label li ul.gfield_radio li, body .gform_wrapper ul.left_label li ul.gfield_checkbox li, body .gform_wrapper ul.right_label li ul.gfield_radio li, body .gform_wrapper ul.right_label li ul.gfield_checkbox li {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
}

[ruenel]

Hello There,

Thanks for posting in! To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body #gform_1 ul.top_label li ul.gfield_radio li {
    display: inline-block;
}

We would loved to know if this has work for you. Thank you.

[njbentley1]

That did it, thanks!

[Prasant]

You are most welcome.