Select2 v4.0.0-rc2 - Inline dropdown opening direction
If there is not enough space on the bottom will it open up at the top?
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.full.min.js"></script>
<form id="move">
<p>Distance from top:
<input type="text" name="distance" value="200px" />
<input type="submit" />
</p>
</form>
<form id="reset">
<input type="submit" value="re-insert dropdowns" />
</form>
<form id="float">
<input type="submit" value="Toggle float" />
</form>
<p id="it">Native dropdown:
<select name="state">
<option value="">---------------</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option...
CSS
#it {
position: relative;
}
JavaScript
jQuery(document).ready(function () {
var $it = jQuery('#it');
var selects = $it.html();
var $distance = jQuery('input[name=distance]');
jQuery('#move').on('submit', function (e) {
e.preventDefault();
$it.css('top', $distance.val());
});
jQuery('#reset').on('submit', function (e) {
e.preventDefault();
$it.html(selects);
jQuery('select[name=more_states]').select2();
});
var float = false;
jQuery('#float').on('submit', function (e) {
e.preventDefault();
float = !float;
$it.css('float', float ? 'left' : 'none');
});
var selects = $it.html();
// Enable the dropdownAdapter Decorator for inserting the dropdown in the container, not <body>
jQuery.fn.select2.amd.require('select2/dropdown/attachContainer');
// Backwards, convoluted way of accessing Utils so we can Decorate the Adapter
jQuery.fn.select2.amd.define('select2/dropdown/attachContainer2exe', ['select2/utils'], function (Utils) {
var Dropdown = jQuery.fn.select2.amd.require._defined['select2/dropdown'];
var DropdownSearch = jQuery.fn.select2.amd.require._defined['select2/dropdown/search']
//var dropdownAdapter = Utils.Decorate(Dropdown, jQuery.fn.select2.amd.require._defined['select2/dropdown/attachContainer']);
var dropdownAdapter = Utils.Decorate(Dropdown, DropdownSearch); //var SearchableDropdown = Utils.Decorate(dropdownAdapter, DropdownSearch);
if (jQuery.fn.select2.defaults.defaults.minimumResultsForSearch !== 0) {
dropdownAdapter = Utils.Decorate(
dropdownAdapter,
jQuery.fn.select2.amd.require._defined['select2/dropdown/minimumResultsForSearch'] //MinimumResultsForSearch
);
}
if (jQuery.fn.select2.defaults.defaults.closeOnSelect) {
dropdownAdapter = Utils.Decorate(
dropdownAdapter,
...