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 (select2/select2#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.