Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby

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,110 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

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