blafarmm
Member
Experimenting with "Left Aligned" forms -- I've noticed that different browsers display differing numbers of characters for the left-most column of field identifiers.
I would like to expand that left-most column further -- so that some of my longer field identifiers don't "wrap" to a second line and use up precious vertical space.
I'm pretty new to this -- so is there a very simple way to widen the left most column of field identifiers in a "Left Aligned" form?
Thanks
This is going to take a little tweaking on your end to get it just right, but here's the basics. The width's are set as percentages to allow for the most flexibility. You're going to want to increase the width on the label elements (left) and decrease the width on the input elements on the right.
line 53 - increase the width percentage
.gform_wrapper .left_label .gfield_label {
float:left;
font-weight:bold;
margin:2px 15px 0 0;
width:29%;
}line 61 - decrease the width percentages on both here
.gform_wrapper .right_label input.large, .gform_wrapper .right_label select.large, .gform_wrapper .left_label input.large, .gform_wrapper .left_label select.large, .gform_wrapper textarea.textarea {
width:59%;
}
.gform_wrapper .right_label div.ginput_complex, .gform_wrapper .left_label div.ginput_complex {
float:left;
width:64%;
}line 93 - increase the left margin value here
.gform_wrapper .gform_footer.right_label, .gform_wrapper .gform_footer.left_label {
padding:16px 0 10px 31%;
}There may still be other instances of the widths that you need to tweak to make it look just right in your theme.
Please note: It's best to copy all of the Gravity Forms styles and append them to your theme style sheet for customizations. Once you've done this, go into the forms settings page and uncheck the "output css" option.
That way, all your customizations are in the theme files and won't get overwritten when you update the plugin.