Prévenir select2 retournement de la liste déroulante vers le haut

Modifier le plugin n'est pas recommandée comme vous le mentionnez. J'ai eu un problème similaire et je ne pouvais pas trouver un moyen d'utiliser select2 options pour forcer le menu déroulant permettant de rester en-dessous. La solution que j'ai est le suivant:

$("#mySelect2").select2({ ...options... })
    .on('select2-open', function() {

        //however much room you determine you need to prevent jumping
        var requireHeight = 600;
        var viewportBottom = $(window).scrollTop() + $(window).height();

        //figure out if we need to make changes
        if (viewportBottom < requireHeight) 
        {           
            //determine how much padding we should add (via marginBottom)
            var marginBottom = requireHeight - viewportBottom;

            //adding padding so we can scroll down
            $(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");

            //animate to just above the select2, now with plenty of room below
            $('html, body').animate({
                scrollTop: $("#mySelect2").offset().top - 10
            }, 1000);
        }
    });

Ce code détermine si il y a assez de place pour placer le menu déroulant en bas et si pas, crée par l'ajout de la marge en bas à certains élément de la page. Ensuite, il passe à juste au-dessus de la select2 de sorte que le menu déroulant ne flip.

OriginalL'auteur

Depuis la modification du code source n'est pas une option et l'ajout d'un crochet à l' select2:open événement n'est pas très élégant, en particulier lorsque vous avez plusieurs select2 instances dans la même page, j'ai écrit une petite extension pour le Select2 plugin.

Mon application est inspiré par un PR de plugin référentiel (https://github.com/select2/select2/pull/4618) qui n'est pas encore fusionné.

Fondamentalement, le code suivant remplace le plugin original de la fonction qui gère la liste déroulante de positionnement et ajoute une nouvelle option (dropdownPosition) pour forcer le menu déroulant de positionnement au-dessus/en-dessous.

La nouvelle dropdownPosition option peut prendre les valeurs suivantes:
- below - la liste déroulante est affichée au bas de l'entrée;
- above - la liste déroulante est affichée en permanence en haut de l'entrée;
- auto (par défaut) - il utilise l'ancien comportement.

Il suffit d'insérer le code suivant après select2.js fichier:

(function($) {
var Defaults = $.fn.select2.amd.require('select2/defaults');
$.extend(Defaults.defaults, {
dropdownPosition: 'auto'
});
var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');
var _positionDropdown = AttachBody.prototype._positionDropdown;
AttachBody.prototype._positionDropdown = function() {
var $window = $(window);
var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above');
var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below');
var newDirection = null;
var offset = this.$container.offset();
offset.bottom = offset.top + this.$container.outerHeight(false);
var container = {
height: this.$container.outerHeight(false)
};
container.top = offset.top;
container.bottom = offset.top + container.height;
var dropdown = {
height: this.$dropdown.outerHeight(false)
};
var viewport = {
top: $window.scrollTop(),
bottom: $window.scrollTop() + $window.height()
};
var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);
var css = {
left: offset.left,
top: container.bottom
};
//Determine what the parent element is to use for calciulating the offset
var $offsetParent = this.$dropdownParent;
//For statically positoned elements, we need to get the element
//that is determining the offset
if ($offsetParent.css('position') === 'static') {
$offsetParent = $offsetParent.offsetParent();
}
var parentOffset = $offsetParent.offset();
css.top -= parentOffset.top
css.left -= parentOffset.left;
var dropdownPositionOption = this.options.get('dropdownPosition');
if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') {
newDirection = dropdownPositionOption;
} else {
if (!isCurrentlyAbove && !isCurrentlyBelow) {
newDirection = 'below';
}
if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) {
newDirection = 'above';
} else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) {
newDirection = 'below';
}
}
if (newDirection == 'above' ||
(isCurrentlyAbove && newDirection !== 'below')) {
css.top = container.top - parentOffset.top - dropdown.height;
}
if (newDirection != null) {
this.$dropdown
.removeClass('select2-dropdown--below select2-dropdown--above')
.addClass('select2-dropdown--' + newDirection);
this.$container
.removeClass('select2-container--below select2-container--above')
.addClass('select2-container--' + newDirection);
}
this.$dropdownContainer.css(css);
};
})(window.jQuery);

L'initialiser le plugin comme suit:

$(document).ready(function() {
$(".select-el").select2({
dropdownPosition: 'below'
});
});

Violon ici:
https://jsfiddle.net/byxj73ov/

Github:
https://github.com/andreivictor/select2-dropdownPosition

OriginalL'auteur

J'ai utilisé pour trouver plus facile, plus rapide solution pour que:

        $("select").select2({
//Options
}).on('select2:open',function(){
$('.select2-dropdown--above').attr('id','fix');
$('#fix').removeClass('select2-dropdown--above');
$('#fix').addClass('select2-dropdown--below');
});

C'est simple, il suffit de changer la .choisir 2-liste, par-dessus à .choisir 2-liste--ci-dessous dans le l'ouverture de l'événement (select2:ouvrir).

Il ne fonctionne qu'en vertu de l'événement, et il pourrait y avoir de nombreuses autres façons d'effectuer simplement de changer de classes lorsque la sélection est ouverte.

ps. Il ne fonctionnera pas si vous essayez de remplir votre sélection à l'aide de jquery.

OriginalL'auteur