How can a dropdown be stylized when using twitter bootstrap with simple_form in a Rails app?

Question

I am using simple_form and twitter-bootstrap-rails gems. Every thing is working fine but somehow drop-down is not getting stylized by twitter bootstrap rails ..it shows like normal forms.

<%= f.input :category, :collection => ["one", "two", "three", "four"],
    :input_html => {:class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>

IMAGE OF DROPDOWN SHOWING:

IMAGE OF DROPDOWN NEEDED AS IN BOOTSTRAP

Answer 1

One way to get stylized dropdowns with SimpleForm and Bootstrap is to use Bootstrap-Select. There is a Rails Gem for it; add to your Gemfile and do a bundle:

gem 'bootstrap-select-rails'

You need to add it to your stylesheet

@import "bootstrap-select";

and Javascript.

//= require bootstrap-select

Now, all you need to do is use input_html: {class: 'selectpicker'} in your existing f.input:

<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'selectpicker'}, :label => 'Send To', prompt: "Choose From List" %>

and then initialize the Javascript (which is a one-off regardless of how many selectpickers you have):

<%= javascript_tag "$('.selectpicker').selectpicker();" %>

Restart your app and your input dropdown should render with Bootstrap styling.

Some extra info that may be useful: you can disable the prompt item so that it cannot be selected from the dropdown by adding the disabled class to the item. I couldn't find any guidance on SimpleForm how to apply a style to one element of a collection but I came up with the below that does it to all such prompts:

<%= javascript_tag "$('li[data-original-index=0]').addClass('disabled');" %>

Answer 2

Replace

<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>

With

<%= f.input :category, :collection => ["one", "two", "three", "four"],:input_html => { :class => 'form-control'}, :label => 'Send To', prompt: "Choose From List" %>

.form-control is used to style select tags. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

dropdown is not used for select tags. See details here