Whats wrong with this class addition to this rails form_for?

2
votes

I am trying to style form elements within this rails form_for but continually run into syntax error, nothing i try seems to be working, can you see the problem?

<%= form_for(@todo_list) do |f| %>
  <div class="form-group">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="form-group">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div>
    <%= f.submit, html: {class: "btn btn-default btn-xs"} %>
  </div>
<% end %>

Results in this error: _form.html.erb:23: syntax error, unexpected tLABEL, expecting '=' ...buffer.append=( f.submit, html: {class: "btn btn-default btn... ...

All sorts of variations of class=, class:, html=>, etc etc just seem to give errors too.

<%= f.submit, class: "btn btn-default btn-xs" %>

results in this error:

SyntaxError in TodoListsController#edit ...... _form.html.erb:23: syntax error,unexpected tLABEL, expecting '=' ...uffer.append=( f.submit, class: "btn btn-default btn-xs" );@... ... ^

Passing 'form-horizontal' into form_for still produces an error;

<%= form_for(@todo_list, html => {:class => "form-horizontal"})  do |f| %>
....
....
<%= f.submit, class: "btn btn-default btn-xs" %>

SyntaxError in TodoListsController#edit ... _form.html.erb:23: syntax error, unexpected tLABEL, expecting '=' ...uffer.append=( f.submit, class: "btn btn-default btn-xs" );@... ... ^

Note that if i explicitly declare a label to the submit action, e.g.;

<%= f.submit 'Save', class: "btn btn-default btn-xs" %>

Then the class gets added successfully and my bootstrap styling works. However this neither locates the primary problem nor solves it as then I can't use rails' form_for dynamic naming of the submit action.

Classes I apply to divs seem to work fine, bootstrap is loaded fine. Can anyone help? Thanks

4
cssruby-on-railstwitter-bootstrapform-for
You have an extra comma: f.submit class: "btn btn-default btn-xs" (don't use a comma after the f.submit call) (or eventually give nil as first argument) – MrYoshiji
@MrYoshiji please submit your comment as an answer, because it's the right one. Oh my, after hours and hours researching this, it was the tiniest thing!! Thank you. – jbk

4 Answers

2
votes

This is a typo error: you have an extra comma in:

f.submit, class: "btn btn-default btn-xs"
#       ^ extra comma

You should use the following:

f.submit nil, class: 'btn btn-default btn-xs'
#       ^ no comma
2
votes

You forgot to add label for submit button

<%= f.submit 'Ok', class: "btn btn-default btn-xs" %>

EDIT Another way is rewrite default value of button:

<%= f.submit class: "btn btn-default btn-xs", value: 'Ok!' %>

and, as I think, here's what you're looking for:

<%= f.submit class: "btn btn-default btn-xs" %>

no comma after f.submit

0
votes

As mentioned by Umar, your f.submit classreference is incorrect:

<%= f.submit, class: "btn btn-default btn-xs" %>

You'll also benefit from using a loop in your form:

#form
<% options = [[:title, "text_field"],[:description, "text_area"]] %>
<%= form_for @todo_list do |f| %>
   <% options.each do |option| %>
      <%= content_tag :div, class: "form-group" %>
          <%= f.label option[0] %>
          <%= f.send(option[1], option[0]) %>
      <% end %>
   <% end %>
   <%= f.submit %>
<% end %>
0
votes

Use like this.

<%= form_for(@todo_list, :html => {:class => "form-horizontal"}) do |f| %>

<%= f.submit class: "btn btn-default btn-xs"%>