Sajjan Sarkar Sajjan Sarkar - 3 years ago 173
CSS Question

Select2 multi-select with no closeOnSelect overlaps results on top of selected tags

Problem:

When I have a

select2()
with
closeOnSelect =false,
the results list overlaps the selected values when the no of selected values cause the values to wrap around.

HTML:

<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>...
</select>


Javascript:

$("#e1").select2({
closeOnSelect: false
})


Screenshot:

enter image description here

Fiddle:

http://jsfiddle.net/sajjansarkar/dsg2t7y2/

Don Don
Answer Source

While not much cleaner than Sajjan's answer. You could call a close and open in the change event of the select. This causes the box to be redrawn on every selection without the need of knowing what class names select2 happens to be using this version (in case it changes).

var select = $("#e1").select2({
  closeOnSelect: false
}).on("change", function(e){
  select.select2("close");
  select.select2("open");
});

http://jsfiddle.net/dsg2t7y2/1/

This has the advantage of using the same methods select2 would normally use to position the dropdown. So if you have any on the page which do close on select, the look will be consistent.

Sidenote: as annoying as it is, both with and without this the scroller returns to the top after every selection. shudders it kinda kills me inside

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download