'Add a CSS class to <%= f.submit %>
My question is easy:
<%= f.submit %>
Where does the class declaration go? I'm getting errors on multiple attempts.
Solution 1:[1]
<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>
This should do. If you're getting an error, chances are that you're not supplying the name.
Alternatively, you can style the button without a class:
form#form_id_here input[type=submit]
Try that, as well.
Solution 2:[2]
You can add a class declaration to the submit button of a form by doing the following:
<%= f.submit class: 'btn btn-default' %> <-- Note: there is no comma!
If you are altering a _form.html.erb partial of a scaffold and you want to keep
the dynamic change of the button name between controller actions, DO NOT specify a name 'name'.
Without specifying a name and depending on the action the form is rendered the button will get the .class = "btn btn-default" (Bootstrap class)(or whatever .class you specify) with the following names:
Update model_name
Create model_name
(where model_name the name of the scaffold's model)
Solution 3:[3]
Rails 4 and Bootstrap 3 "primary" button
<%= f.submit nil, :class => 'btn btn-primary' %>
Yields something like:
Solution 4:[4]
As Srdjan Pejic says, you can use
<%= f.submit 'name', :class => 'button' %>
or the new syntax which would be:
<%= f.submit 'name', class: 'button' %>
Solution 5:[5]
Add class key-value pair
<%= f.submit "Submit", class: 'btn btn-primary' %>
Solution 6:[6]
By default, Rails 4 uses the 'value' attribute to control the visible button text, so to keep the markup clean I would use
<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>
Solution 7:[7]
both of them works
<%= f.submit class: "btn btn-primary" %> and
<%= f.submit "Name of Button", class: "btn btn-primary "%>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Srdjan Pejic |
| Solution 2 | aloucas |
| Solution 3 | Community |
| Solution 4 | RailsZilla.com |
| Solution 5 | |
| Solution 6 | benjamin.patch |
| Solution 7 | gsumk |