Rails 4, Collection Select, and Select2 Plugin: Populated Dropdown Appears over Textfield

Question

So I have quite a long list of properties (2000+) and when I click the text field "Select Affected Properties..." the dropdown appears with the correctly populated data. This is good.

Now, why in the world is the populated dropdown hovering over the textfield instead of below it? I have not added any custom CSS.

The collection_select tag in _form.html.erb

<div class="form-group">
    <%= f.label :property_id %><br>    
    <%= collection_select(:ticket, :property_ids, Property.all, :id, :property_name_and_address, {}, {:multiple => true, class: "form-control"}) %>
</div>

The javascript in tickets.js

$("#ticket_property_ids").select2({
  placeholder: "Select Affected Properties, You Can Search By Name or Address Via Typing "
});

Any input on this matter is greatly appreciated.

score 0 · Accepted Answer · answered Mar 24 '16 at 18:20

Ok the issue was that for the select2 js file I was using select2.full.min.js instead of select2.min.js. Switching to the non-full version fixed the issue.

Per the documentation:

You should only use this build if you need the additional features from Select2, like the compatibility modules or recommended includes like jquery.mousewheel

Rails 4, Collection Select, and Select2 Plugin: Populated Dropdown Appears over Textfield

1 Answers1