Add a CSS class to <%= f.submit %>

Ruby on-RailsCssRuby on-Rails-3

Ruby on-Rails Problem Overview


My question is easy:

<%= f.submit %>

Where does the class declaration go? I'm getting errors on multiple attempts.

Ruby on-Rails Solutions


Solution 1 - Ruby on-Rails

<%= 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 - Ruby on-Rails

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 - Ruby on-Rails

Rails 4 and Bootstrap 3 "primary" button

<%= f.submit nil, :class => 'btn btn-primary' %>

Yields something like:

screen-2014-01-22_02.24.26.png

Solution 4 - Ruby on-Rails

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 - Ruby on-Rails

Add class key-value pair

<%= f.submit "Submit", class: 'btn btn-primary' %>

Solution 6 - Ruby on-Rails

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 - Ruby on-Rails

both of them works <%= f.submit class: "btn btn-primary" %> and <%= f.submit "Name of Button", class: "btn btn-primary "%>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsscirrusView Question on Stackoverflow
Solution 1 - Ruby on-RailsSrdjan PejicView Answer on Stackoverflow
Solution 2 - Ruby on-RailsaloucasView Answer on Stackoverflow
Solution 3 - Ruby on-RailscwdView Answer on Stackoverflow
Solution 4 - Ruby on-RailsRailsZilla.comView Answer on Stackoverflow
Solution 5 - Ruby on-RailsBenKoshyView Answer on Stackoverflow
Solution 6 - Ruby on-Railsbenjamin.patchView Answer on Stackoverflow
Solution 7 - Ruby on-RailsgsumkView Answer on Stackoverflow