select2和bootstrap文本字段不在rails形式中对齐

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.