CODEWITHSUNDEEP
htmlruby-on-railscss
alamodey
alamodey

Reputation: 14953

Lining up text fields

How do I line up textfields so they look more neat? At the moment I've got:

<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>

Upvotes: 1

Views: 1678

Answers (2)

Dmitri Farkov
Dmitri Farkov

Reputation: 9691

For your question: Set a width to the label element. On a separate note, I'd do the styling in an external stylesheet and use the following syntax for form, just a matter of taste. Sure it is a bit more verbose, but a bit 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>

Upvotes: 0

&#211;lafur Waage
&#211;lafur Waage

Reputation: 70021

You put a width in 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>

Upvotes: 4

Related Questions