Rails 4: collection_select not inserting 'class' attribute?

Question

What am I missing here? I am working with Rails 4.0.0 and trying out the new Bootstrap 3.0.0rc1. I have a simple 'recipe box' app that has a Recipe model and a Category model that feeds a 'category' field on the Recipe. In the recipes#new view, I have the following fields defined:

<h1>Create New Recipe</h1>
<%= form_for @recipe, html: { class: 'form-horizontal' } do |f| %>
<fieldset>
  <legend>Main Information</legend>
  <div class="form-group">
    <%= f.label :name, "Recipe name", class: "col-lg-2 control-label" %>
    <div class="col-lg-6">
      <%= f.text_field :name, class: "form-control" %>
    </div>
  </div>
<div class="form-group">
  <%= f.label :category_id, class: "col-lg-2 control-label" %>
  <div class="col-lg-6">
    <%= f.collection_select :category, Category.all, :id, :name, class: "form-control", prompt: "Select a category" %>
  </div>
</div>
...

The text_field helper renders a properly formatted tag, complete with class attribute. However, no matter how I construct the select or collection_select helpers, I can't seem to get Rails to give me a that contains a class attribute. The code above gives me this:

<select id="recipe_category" name="recipe[category]"><option value="">Select a category</option>

...

So the prompt comes through, but the class attrib does not, so it looks like part of html_options hash is recognized. But the Bootstrap styling isn't applied. Doesn't matter if I use braces {} around the class: "form-control" or not. Doesn't matter if I use parens around the collection_select params or not. Happens with select helper as well.

Can anyone advise? Are you seeing this too?

Alter Lagos · Accepted Answer · 2016-02-29T04:23:08.433

48

Try using :

<%= f.collection_select :category, Category.all, :id, :name, {prompt: "Select a category"}, {class: "form-control"} %>

According to the rails documentation, first comes options and then html options. Remember that html options need to be in braces: {prompt: "Select a category"} or {class: "form-control"}.

edited Feb 29 '16 at 04:23

answered Aug 10 '13 at 16:14

Alter Lagos

12,090
1
70
92

Yeah, I tried changing up the order, adding braces and removing them, etc. Doesn't seem to matter. I am viewing it in Chrome v28.0.1500.95, but same issue shows in IE10. I'm may make a new app in Rails 3.2 and validate it there... – user2670683 Aug 10 '13 at 21:27
2

And have you tried adding braces to both options? Like `<%= f.collection_select :category, Category.all, :id, :name, {prompt: "Select a category"}, {class: "form-control"} %>` – Alter Lagos Aug 10 '13 at 21:39
That did it! So html_options = {} is not a single hash, but each option is its own hash? Thank you very much for the assist, Alter! – user2670683 Aug 12 '13 at 02:41
This is the definitive answer. I tried several other combinations and only this worked. – Donato Jan 28 '15 at 00:58
2

sorry to bring up an old thread, but it's actually not necessary to wrap every html option in a separate hash. this also applies to the other collections, but the reason is the collection select is expecting a hash of additional options not related to the html before the html options. if you don't need any of those options, you just need to include a single empty hash: `f.collection_select :category, Category.all, :id, :name, {}, class: "form-control", required: true, ...` – TheRealMrCrowley Mar 31 '17 at 17:55

score 10 · Answer 2 · answered Dec 12 '13 at 18:32

<%= f.collection_select :category, Category.all, :id, :name, {prompt: "Select a category"}, {class: "form-control"} %>

The checked answer doesn't work, but is checked because the correct answer buried in the comments (provided by Alter Lagos). I am trying to avoid confusion by moving the actual answer out of the comments.

score 0 · Answer 3 · edited May 13 '17 at 02:34

0

Try this, works for me!

<%= collection_select(:category, :category_id, @category_for_advertising, :id, :description, {}, {:class=>"dropdown-menu"}) %>

edited May 13 '17 at 02:34

Nathan Tuggy

2,237
27
30
38

answered May 13 '17 at 02:15

Jemison Santos

13
3

Norm · Answer 4 · 2017-05-23T23:24:58.133

0

Another version of what has been answered, incorporating W3CSS:

  <%= family_form.collection_select :billing_status_id,  
    > BillingStatus.by_tenant(@cutid).order(:description), :id,
    > :description, {}, {class: 'w3-select'} %>
 <%= family_form.label
    > :billing_status, class: 'w3-label' %>

edited May 23 '17 at 23:24

answered May 23 '17 at 23:19

Norm

109
1
7

Rails 4: collection_select not inserting 'class' attribute?

4 Answers4