Aligning form fields using CSS

Question

I have an advanced search form (click "Advanced search") here in Dupal 7 - http://www.ibuild.ph/mtf-rdp-minimal/search/node and contact form here - http://www.ibuild.ph/mtf-rdp-minimal/contact. The search fields are inline, while the contact fields are positioned below the labels.

Is there a way to inline position the fields with the text labels and make the fields aligned vertically with each other without separating the text labels and form fields in two divs?

Thi Tran · Accepted Answer · 2015-03-01 12:05:40Z

2

Using table

You can change width of label by changing width: 100px;

<table style="width: 100%;">
<colgroup>
    <col style="width: 100px;">
    <col>
<colgroup>
<tr>
    <td>Name</td>
    <td><input type="text" /></td>
</tr>
  
<tr>
    <td>Address</td>
    <td><input type="text" /></td>
</tr>
  
</table>

Using min-width:

<div>
  <label style="display: inline-block; min-width: 100px;">Name: </label><input type="text" />  
</div>
    
<div>
  <label style="display: inline-block; min-width: 100px;">Address: </label><input type="text" />  
</div>

edited Mar 1, 2015 at 12:05

answered Mar 1, 2015 at 5:19

Thi Tran

7015 silver badges11 bronze badges

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

2 Comments

FactoryAidan Over a year ago

Since this is the accepted answer, you should update your html to have valid closing tags. I wouldn't want someone to paste your answer in their editor and end up more confused than they started.

Thi Tran Over a year ago

Thanks for your response, I have edited closing tags.

FactoryAidan · Accepted Answer · 2015-03-01 05:04:23Z

1

You could do either of these things:

Make a <table> with two columns instead of your <fieldset>.

Put the <label> elements in the first column and <input/> elements in the second column. The table will automatically align the column widths to the largest element in that column.

OR

You could add this to your css:

fieldset.search-advanced label{
    min-width:200px;
}

edited Mar 1, 2015 at 5:04

answered Mar 1, 2015 at 4:59

FactoryAidan

2,6041 gold badge15 silver badges13 bronze badges

Comments

jaesperanza · Accepted Answer · 2015-03-01 06:18:44Z

0

Thanks, Thi Tran and FactoryAidan. Will try customizing Drupal's webform tpl instead. But your answers will definitely come in handy in customizing the template.

Here is the link to the resource I have found - http://cgit.drupalcode.org/webform/tree/THEMING.txt?id=HEAD

answered Mar 1, 2015 at 6:18

jaesperanza

5176 silver badges10 bronze badges

Collectives™ on Stack Overflow

Aligning form fields using CSS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related