CODEWITHSUNDEEP
cssruby-on-railsformsruby-on-rails-4button
Thibaud Clement
Thibaud Clement

Reputation: 6907

Rails: How to style form submit button

I have a Rails 4, that uses Rails' default form (I am NOT using Simple Form).

In one of my forms, I would like to style the following submit button:

<td>
  <%= f.submit %>
</td>

I tried to apply an id to the td but this obviously applied my new style to the entire table cell.

Then, I tried to apply an id to the submit button itself, as recommended here, as follows:

<td>
  <%= f.submit, :id => 'create_post' %>
</td>

This gave me the following error:

SyntaxError in CalendarsController#show
/Users/TXC/code/rails/calendy/app/views/calendars/show.html.erb:69: syntax error, unexpected =>, expecting :: or '[' or '.' ...er.append=( f.submit, :class => 'create_post' );@output_buff... ... ^
<%= f.submit, :class => 'create_post' %>

What is a good way to apply a custom style to a submit button in Rails?

Upvotes: 3

Views: 9694

Answers (4)

Promise Preston
Promise Preston

Reputation: 29098

I had this same challenge when working with a Rails 6 application and Bootstrap 4.

I tried this and it worked for me:

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

OR

<%= form.submit class: 'btn btn-primary' %>

Note: Do not add any comma, between the f.submit or form.submit and class.

Or you can try this if you want to add a distinct label:

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

OR

<%= form.submit "Create", class: 'btn btn-primary' %>

That's all.

I hope this helps

Upvotes: 4

xeitor
xeitor

Reputation: 377

Try changing your syntax to this:

<%= f.submit, id: 'create_post' %>

Upvotes: 4

JimdeB
JimdeB

Reputation: 31

I ran into the same problem, trying to restyle the <%= f.submit %> submit button in the form helper _form.html.erb which is still used in Rails 5 templates.

My solution, for use with the form helper and Bootstrap, is that the submit needs to also be given an id (below it is :create) which is also a label for the button.

So, what works for me is: <%= f.submit :create, class:"btn btn-default"%>

Upvotes: 3

alex1sz
alex1sz

Reputation: 340

<%= f.submit, :class => "blue button" %>

and 

<%= f.submit, class: "blue button" %>

First off, both of the above are valid syntax and both work. The first is old hash syntax, and the second is new hash syntax added to ruby 1.9.

:old_hash_syntax => "something... " new_syntax_key: "something"

So, there are no problems with the syntax for: 

<%= f.submit, :class => "create_post" %>

So the syntax error that occurs is not from the line above. The problematic syntax precedes that line, probably somewhere else within that form. Hard to find, without seeing the form lines preceding f.submit

Next, I'm not sure what you were trying to do with the td tags, but most likely it is wrong, remove them. The tag is used to define a cell in table. td is for table data. Hopefully, you don't actually have a table and the td tag was just mistakenly thrown in. In that case, just get rid of the td tags, they are for table data only. If you do have a form within a table, you should probably rethink whether the table is necessary and what utility it provides. Tables aren't used for styling forms, and I can't think of any sensible reasons to put a form in a table.

If all you want is to style the button, then no need to put the f.submit in div tags or html tags outside of the erb tags. Simply specify the css class within the f.submit tags. The corresponding css styling will be applied to the f.submit. So use,

<%= f.submit, :class => "custom_button" %>

or: <%= f.submit, class: "custom_button" %>

Either syntax is fine. The styling is in the css, .custom_button { style properties }. So, what you need to do is find the source of the syntax error preceding your f.submit tags and remove it. Next, specify an appropriate class within your f.submit tags. Boom your all set, the css will be applied.

Upvotes: 3

Related Questions