Align text boxes
How do I line up the text boxes to make them look tidier? At the moment I have:
<div id="content">
<h2>Change password</h2>
<% form_tag({:action => "change_password"}, :method => "post") do %>
<%= @error %>
<div class="form_row">
<label for="current_password">Current password:</label>
<%= password_field_tag 'current_password', "", :size => 15 %>
</div>
<div class="form_row">
<label for="new_password">New password:</label>
<%= password_field_tag 'new_password', "", :size => 15 %>
</div>
<div class="form_row">
<label for="repeat_new_password">Repeat new password:</label>
<%= password_field_tag 'repeat_new_password', "", :size => 15 %>
</div>
<%= submit_tag "Set new password", :class => "submit" %>
<% end %>
</div>
+1
a source to share
3 answers
You are putting the width on the label element.
<form action="">
<label style='float: left; display: block; width: 100px;'>Hello</label><input type="text" size="3"><br />
<label style='float: left; display: block; width: 100px;'>Long World</label><input type="text" size="3"><br />
<label style='float: left; display: block; width: 100px;'>How are you?</label><input type="text" size="3"><br />
</form>
+4
a source to share
As per your question: set the width of the label element. On a separate note, I would style it in an external stylesheet and use the following syntax for the form, just a matter of taste. Sure, this is a little more verbose, but a little easier to style imo.
<div id="#content">
<h2>Change Password</h2>
<form>
<dl>
<dt>
<label for="elm">Test:</label>
</dt>
<dd>
<input type="text" id="elm" />
</dd>
</dl>
</form>
</div>
0
a source to share