Aligning grid based form elements and their labels

Question

we have a requirement where form elements are laid out in 3 separate columns. The labels can have varying amounts of text and the form elements will be mainly input boxes and textarea's.

The designers want to ensure that the input elements are vertically aligned correctly.We are unable to use specific padding/margins as this is not flexible when the app is localized.

Please see the image below. The first row shows the issue we are experiencing and the second is how we would like it laid out. The only solution we have thought of is placing the label in a separate row to the actual form element. I cant imagine this would be good for accessibility.

Any tips really appreciated.

enter image description here

Here is a fiddle of the code so far - http://jsfiddle.net/nJZ6Y/4/

<div class="grid_4"> <div class="contents"> <label>TR 1 TD 1</label> <input type="text" /> </div> </div> <div class="grid_4"> <div class="contents"> <label>Bonorum Fermentum Tortor Adipiscing Pharetra</label>

fred02138 · Accepted Answer · 2013-09-25 13:56:33Z

1

Here is the fiddle: http://jsfiddle.net/nJZ6Y/19/

You have to add a span inside each label, then add these CSS rules.

label { min-height: 3em; } label span { vertical-align: -3em; display: inline-block; }

edited Sep 25, 2013 at 13:56

answered Sep 25, 2013 at 13:38

fred02138

3,3611 gold badge16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grimmus Over a year ago

Thank you Fred, this is awesome. What about if the label text spilled over onto 4 lines in some cases ? Would the min-height value need to be adapted for this ?

fred02138 Over a year ago

@grimmus Yes, definitely. You are going to have to experiment. If you know the maximum number of lines for the label, that will be of use. Also, please check for browser compatibility because I was working with IE10.

Corey · Accepted Answer · 2013-09-25 13:58:10Z

Fiddle: http://jsfiddle.net/nJZ6Y/18/

I added a box around the label element and aligned it to the bottom. This only works if you know the approximate max-height of the text though. If the text goes longer than that it will fall out of the container and go incognito. Fred's answer is more elegant. FYI: Bonorum in your lorem ipsum is a funny word...

 .label-box { position: relative; } .label-box { height: 50px; } label { float:left; width:100%; color:#fff; position: absolute; bottom: 0; left: 0;}

Collectives™ on Stack Overflow

Aligning grid based form elements and their labels

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related