Extends Select2 plugin by adding an option to set the position of the dropdown
Extends Select2 v4 plugin by adding an option to set the position of the dropdown.
Select2 automatically places the dropdown, either above or below the element. In some cases (e.g. mobile devices) it can be a better experience to force the dropdown to a certain position.
This feature was already discussed in the official plugin repository (https://github.com/select2/select2/issues/2710), but hasn't been included yet.
The new dropdownPosition
can take the following values:
auto
(default) - it uses the old behavior, placing the dropdown either above or below the element, depending on available space,below
- the dropdown is always displayed below the element;above
- the dropdown is always displayed above the element.Include the script after Select2 main javascript file:
<script src="select2.js"></script>
<script src="select2-dropdownPosition.js"></script>
Initialize the select2 plugin with the dropdownPosition
option set to above
or below
:
$("select").select2({
// other options
dropdownPosition: 'below'
});
Demo available on JsFiddle.