[Resolved] Gravity Forms Sub-label Text Formatting Problem

[stlayman]

Hi, we’re using the latest version of Gravity Forms, and although the form is set to “align, bottom” for sub-labels text, it’s just not working. The same form is behaving properly on a duplicate site with a different theme. So, I thought I’d try to find out if GP has some special word-wrap property that I need to disallow(?)
Here’s the beta site, if you go into a collapsed mobile view, you’ll see the sub-labels on the far right, and not below. (See City, State / Region) The only reason it looks okay in the sidebar is because of the margin constraints! http://turnerpco.wpengine.com

Thank you!

[stlayman]

Sorry, the correct URL for the form is here: http://turnerpco.wpengine.com

[Tom]

Hi Stacy,

Try adding this CSS:

.gfield label {
    display: block;
}

[stlayman]

Hmmm… this is working except that all the radio button fields also display underneath the radio buttons. It could be a javascript conflict maybe(?)

[Tom]

Hmm, maybe try this instead:

.gfield input[type="text"] + label {
    display: block;
}

[stlayman]

That worked! You’re the *man*. I’m guessing it was inheriting a bunch of css… thanks a million!

[Tom]

Glad I could help! 🙂

[stlayman]

Hi Tom, Still trying to nail this down on other default forms. We’ve imported three other forms from the cloned site here: http://turnerpest.wpengine.com
Here’s one example form that’s rendering properly on the cloned site: http://turnerpest.wpengine.com/contact-us/order-pest-control/

After the import of the same form to our beta site here: http://turnerpco.wpengine.com/contact-us/order-pest-control/ the default formatting is just not working. I’ve tried everything I know to try and hack the CSS(?)

I also contacted Gravity Forms support and this is what they said:

“This is something related to your theme and not a problem with the default styles and settings. The sub-label is placed after the input in the markup which means the setting is being applied properly.
Check out the attached screenshots of your form in preview mode. You’ll notice that the sub-labels are displayed properly. (this is true)

“I would suggest looking at your theme styles for custom form styles and then toggling some of those off temporarily to locate the source of the issue.

“It looks like you might get away with just adding a “display:block” on line 22 of your style.css file depending on what you’re trying to achieve.”

Thanks again.

[stlayman]

It seems the GF CSS was NOT enabled. So you can do me a big favor and delete this entire thread 🙁

[Tom]

No worries! So it’s all working now? 🙂

[stlayman]

It’s all working *except* I cannot figure out how to make the sidebar form inline vertical with a media query for desktop only. If you can assist with that, I can sleep tonight! http://turnerpco.wpengine.com

[Tom]

Not sure what you mean by inline vertical? The form looks stacked nicely on mobile for me.

Let me know 🙂

[stlayman]

Sorry, I need to have the sidebar look like the cloned site here: http://turnerpest.wpengine.com/orlando-pest-control-services/

Where the sidebar displays vertically in a block very nicely for desktop only (for min-width: 769px or so…)

[stlayman]

I tried this, but it’s not working:

@media (min-width: 769px) {
.gfield input[type=”text”] + label {
display: block !important;
}

[stlayman]

I think I fixed it with this:

.gform_wrapper *, .gform_wrapper *::after, .gform_wrapper *::before {
box-sizing: unset !important;
}

[Author]

Posts