select2 and bootstrap text field not align in rails form

Question

As you can see in the image below, the text field (using bootstrap) is not align horizontally with select2 dropdown listbox. How can I make it align ?

The following is the _form.html.erb code snippet. The complete code can be found here https://gist.github.com/axilaris/9597320

there 2 are the inputs that are not aligned <%= f.text_field :name %> and <%= select_tag(:option,..

<script>

    $(document).ready(function() {
     $('select#option').select2();
    });

</script>
 <br><br>
 <div class="field">
 <%= f.label :name %><br>
 <%= f.text_field :name %>
 <%= select_tag(:option, 
    options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] )) %>
 </div>

Answer 1

I also use select2 and Bootstrap in few projects. Select2 got its own style and applies after bootstrap. I think you'll have to play with some css margin, padding etc. You can give specific class to your select_tag for a better targeting:

<%= select_tag(:option, options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] ), {class: "my-specific-class-for-select2"}) %>

documentation

EDIT: with data-live-search

<%= select_tag(:option, options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] ), {class: "my-specific-class-for-select2", data:{live_search: "true"}) %>

The tag will get the data-live-search attribute. Note that the underscore (_) will become an -.

Documentation about the tags and data attributes.

EDIT2:

With some adjustments in the html and css I got this working:

application.scss

/*Solution for bootsrap styling compliance*/
a.select2-choice{
  height: 35px !important;
  span{
   padding-top: 4px;
  }
}



In the view

<div class="form-group clearfix">
  <%= f.label :title %><br>
  <div class="col-sm-4"><%= f.text_field :title,  {class: "form-control"} %></div>
  <div class="col-sm-3"><%= select_tag(:type,
  options_for_select([['All', 1], ['Co', 2], ['Bought', 3], ['View', 4], ['Top API', 5]] ), {style: "width:100%;"}) %></div>
</div>


<div class="actions clearfix">
  <%= f.submit :class => "btn btn-primary" %>
</div>

Hope it helps.