CODEWITHSUNDEEP
ruby-on-railscss
Tom Lehman
Tom Lehman

Reputation: 89233

Make text input fields and their labels line up correctly

Here's an excerpt from a fairly standard Rails form:

  <p>
    <%= f.label :from_station %> <%= f.text_field :from_station %>
  </p>
  <p>
    <%= f.label :to_station %> <%= f.text_field :to_station %>
  </p>

By default, this renders like this:

alt text http://img412.imageshack.us/img412/127/picture6u.png

This doesn't look great since the text fields don't line up. What's the easiest way to make the form look more like this:

alt text http://img193.imageshack.us/img193/746/picture7shk.png

I've tried setting the width style property on the <label>s, but this property doesn't seem to do anything.

Upvotes: 7

Views: 8766

Answers (2)

Al.
Al.

Reputation: 2872

I think this is more of a CSS question;

Labels by default aren't a block level element and so won't accept a width. Try setting this CSS:

label{
  width: 4em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block
}

Hope that helps!

Upvotes: 15

sepp2k
sepp2k

Reputation: 370172

You can use a <table> where each label is in column 1 and each textfield is in column 2.

Upvotes: 1

Related Questions