Can't add "well" class to devise sign up form (form_for) using Twitter Bootstrap

Question

Why doesn't the "well" class get displayed when the page is rendered?

<div class="container">
  <div class="row">
    <div class="offset4 span4">
      <h2>Sign up</h2>

      <%= form_for(resource, :html => { :class => "well" }, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <div><%= f.label :email %><br />
        <%= f.email_field :email %></div>

        <div><%= f.label :password %><br />
        <%= f.password_field :password %></div>

        <div><%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation %></div>

        <div><%= f.submit "Sign up" %></div>
      <% end %>

      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>

The form looks like this when rendered:

    <form method="post" id="new_user" class="new_user" action="/users" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="P3KHtU5CRNy0/kVEvck4coilSOWCHYaKPZ5D1xCxQj4=" name="authenticity_token"></div>


        <div><label for="user_email">Email</label><br>
        <input type="email" value="" size="30" name="user[email]" id="user_email"></div>

        <div><label for="user_password">Password</label><br>
        <input type="password" size="30" name="user[password]" id="user_password"></div>

        <div><label for="user_password_confirmation">Password confirmation</label><br>
        <input type="password" size="30" name="user[password_confirmation]" id="user_password_confirmation"></div>

        <div><input type="submit" value="Sign up" name="commit"></div>
</form>

Notice class is just "new_user". No "well", why and how do I fix it?

Thanks

UPDATE:

I've updated it to:

  <%= form_for(resource, :class => "well", :as => resource_name, :url => registration_path(resource_name)) do |f| %>

Rendered HTML:

<form method="post" id="new_user" class="new_user" action="/users" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="P3KHtU5CRNy0/kVEvck4coilSOWCHYaKPZ5D1xCxQj4=" name="authenticity_token"></div>

Still not working. Using Rails 3.2.8 Using HAML in the rest of the app even though these files are ERB. Could that be it?

Wrapping the html elements to your form in an `html` hash was valid in Rails 2.3, but not in 3+ --- so saverio is right on — Jesse Wolgamott, Oct 03 '12 at 01:27
@JesseWolgamott I've tried with :html and just plain :class. Any ideas? — AdamT, Oct 03 '12 at 02:22

score 16 · Answer 1 · answered Jan 02 '13 at 16:11

Actually the reason why your form_for doesn't append the class is because with form_for, you need to state it inside a :html hash:

form_for(resource, :html => {:class => "well"}, :as => resource_name, :url => registration_path(resource_name)) do

api.rubyonrails.org form_for, read the paragraph describing the three hash options (:url, :namespace and :html)

D.Deriso · Answer 2 · 2013-02-23T17:49:15.773

For anyone else having this problem, Speed's solution worked for me.

I decided to share my working solution's code. To get my app to look like http://twitter.github.com/bootstrap/examples/signin.html

I modified my /views/devise/sessions/new.html.erb to look like:

<%= form_for(resource, :as => resource_name, :html => {class:"form-signin"}, :url => session_path(resource_name)) do |f| %>
<h2 class:"form-signin-heading">Please sign in</h2>
<%= f.email_field :email, :autofocus => true, class:"input-block-level", placeholder:"Email address" %>
<%= f.password_field :password, class:"input-block-level", placeholder:"Password"%>

<% if devise_mapping.rememberable? -%> 
    <label class="checkbox">
        <%= f.check_box :remember_me %> Remember Me
    </label>
<% end -%>

<%= f.submit "Sign in", class:"btn btn-large btn-primary" %>

<hr>

<%= render "devise/shared/links" %><% end %>

Don't forget to add the css from the bootstrap example's head to your /assets/css Note that [type="email"] is used instead of [type="text"] as in the bootstrap example.

.form-signin {
    max-width: 300px;
    padding: 19px 29px 29px;
    margin: 40px auto 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}

.form-signin input[type="email"],
.form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
}

Happy coding!

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

The underlying problem was the inability to modify the views. It wasn't just limited to the class which I declared in the form_for correctly. Correct answer: Customizing Devise views in Rails It's the answer with the higher votes.

I couldn't modify the views because I ran

rails generate devise:views User

It should have been

rails generate devise:views

Notice no mention of User.

edited May 23 '17 at 11:52

Community

1
1

answered Oct 03 '12 at 17:50

AdamT

6,405
10
49
75

score 0 · Answer 4 · answered Oct 02 '12 at 18:09

0

<%= form_for(resource, :class => "well", :as => resource_name, :url => registration_path(resource_name)) do |f| %>

answered Oct 02 '12 at 18:09

rewritten

16,280
2
47
50

Changing to :class => "well" didn't fix it for me. Could it be that this file is ERB while the rest of my app uses HAML? – AdamT Oct 03 '12 at 02:22
I wrote it out of memory, but reading the docs it's wrong, the correct way is what you did the first time. – rewritten Oct 03 '12 at 02:25
yeah, so i'm not understanding why it's not working. Any other ideas? – AdamT Oct 03 '12 at 02:28
can't assign "class" like this, needs to go inside an HTML block, see speed's answer – Don P Dec 03 '13 at 00:45

score 0 · Answer 5 · answered Feb 16 '16 at 05:40

0

The way to apply custom styles (with Devise 3.5.3 and when you have more than one Devise model) is to enable scoped views in config/initializers/devise.rb.

It defaults to false. Change it to:

config.scoped_views = true

answered Feb 16 '16 at 05:40

pyfork

3,747
2
21
18

Can't add "well" class to devise sign up form (form_for) using Twitter Bootstrap

5 Answers5