Target label by input type to vertically align label

Gravity Support Forums » Plugin Support » Gravity Forms

Nick5a1
Member

I've increased the font size of all of the text, email, url, tel, number etc inputs across all forms. Now that these text inputs are higher, when labels are left aligned, they are not vertically aligned. I can correct this by increasing the line height of the labels by targeting .gform_wrapper .gfield_label. But this increases the line-height of all labels, including radio buttons and select inputs, which then makes them misaligned.

How can I increase the line-height of the labels for just the text type inputs?

EDIT: Here's my form.

Or could there be another way to achieve the vertical label alignment?

Posted 10 years ago on Saturday May 4, 2013 | Permalink
Steve Napierski
Member
This CSS targets just the labels of the text-types in this form:
```
#field_1_1 label.gfield_label, #field_1_2 label.gfield_label, #field_1_7 label.gfield_label  {
line-height: 32px;
}
```
Hope this answers your question.
Posted 10 years ago on Saturday May 4, 2013 | Permalink
Nick5a1
Member

Hi Steve,

Thanks for your reply. I realise I can individually set the line height on each field, but I'm constantly creating new forms, including custom forms for every post, so I'm looking for a way to target all text type inputs and then not have to touch the css again.

Posted 10 years ago on Saturday May 4, 2013 | Permalink
Richard Vav
Administrator
Another way would be to add a custom class to the 'CSS Class Name' found on the advanced tab of each field you want to align and then create a rule in your stylesheet for that custom class such as
```
.mycustomclass label.gfield_label {
    line-height: 32px;
}
```
Posted 10 years ago on Saturday May 4, 2013 | Permalink
Kevin Flahaut
Administrator
Why not just set the label height for the .gfield_label class globally, then use CSS inheritance to reset/tweak the labels included in the checkbox and radio lists if need be? Here's an example of what I'm talking about.
```
[css]
label.gfield_label {
	color: red !important;
	background-color: #000;
}
ul.gfield_radio li label,
ul.gfield_checkbox li label  {
	color: green !important;
	font-weight:bold;
	background-color: yellow;
}
```
http://i.imgur.com/7e3f7KW.jpg

You might need to go back and adjust the CSS spacing for the select elements as well but I'll be honest, those are a pain the butt to get just right anyhow because of differences in how the browsers render the control.

beyond that, you might want to look at a jQuery solution to specifically target any labels that precede text inputs and manipulate the styles or to add an additional class.
Posted 10 years ago on Sunday May 5, 2013 | Permalink