Search code examples
ruby-on-railsjquery-select2collection-select

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

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.

enter image description here

enter image description here

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.

Solution

  • 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