Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Josue Negron
Josue Negron
4,193 Points
Posted by Josue Negron
Josue Negron
4,193 Points

(Rails 4) How to use collection_select tag within a Bootstrap formatted drop-down-menu

I'm trying to use a collection_select tag within a Bootstrap DropDown Menu. It seem's I'm missing something because is not working properly. Here is the code...

<div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
     <span class="caret"></span>
   </button>
  <%= f.collection_select( :product_id, Product.all, :id, :name, {include_blank: true}, {id: "product_selection", class: "dropdown-menu", 'aria-labelledby'=> "dropdownMenu1"})%>
</div>

The drop-down is displayed but is not working properly; instead of being embedded, the collection_select is creating a drop-down within the Bootstrap drop-down. Thanks in advance for the help.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You can't do what you're trying to do, because a select element is very much different than a bootstrap dropdown. .

You have basically three options.

  1. Deal with the select element as best you can. Select tags are not very stylable. Bootstrap 3 has done some light work to them: http://getbootstrap.com/css/#selects

  2. Loop through your selection options, and print them into your dropdown, and than write your own event handler to do something when one is clicked.

  3. Use a plugin that detects select elements, and generates a dropdown that can be styled, something like this: http://hernansartorio.com/jquery-nice-select/

Hope that helps you

Josue Negron
Josue Negron
4,193 Points
Josue Negron
Josue Negron
4,193 Points

Thanks so much for your fast response and help. I will implement one of your suggestions.