Question

If I were trying to decrease the width of the “email” and “password” forms :

    <div id="signin">
    <h1>Sign in</h1>

    <%= form_for(:session, :url => sessions_path) do |f| %>
      <div class="field">
        <%= f.label :email %><br />
        <%= f.text_field :email %>
      </div>
      <div class="field">
        <%= f.label :password %><br />
        <%= f.password_field :password %>
      </div>
      <div class="actions">
        <%= f.submit "Sign in" %>
      </div>
     <% end %>

…and place them in my navbar at the upper right, how would the CSS look?

Why would….

    #signin #field.text_field {

    width:20px;

    }

…not work?

Thanks.

Answer 1

Rails’ .text_field method will generate an input tag in your HTML, so you need to target that input tag instead. Also, you should be using .field, not #field, since it’s a class, not an id.

#signin .field input {
  width:20px;
}