Comment changer la hauteur de la boîte select2

Vous pouvez le faire avec un simple css. D’après ce que j’ai lu, vous voulez définir la hauteur de l’élément avec la classe “select2-choices”.

 .select2-choices { min-height: 150px; max-height: 150px; overflow-y: auto; } 

Cela devrait vous donner une hauteur de 150px et défiler si nécessaire. Ajustez simplement la hauteur jusqu’à ce que votre image corresponde à vos besoins.

Vous pouvez également utiliser css pour définir la hauteur des résultats de select2 (la partie déroulante du contrôle de sélection).

 ul.select2-results { max-height: 200px; } 

200px est la hauteur par défaut, modifiez-la pour la hauteur souhaitée de la liste déroulante.

 .select2-selection__rendered { line-height: 31px !important; } .select2-container .select2-selection--single { height: 35px !important; } .select2-selection__arrow { height: 34px !important; } 

Vous voudrez probablement donner une classe spéciale à votre select2 d’abord, puis modifier le css pour cette classe uniquement, plutôt que de changer tous les css select2, sitewide.

 $("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" }); 

SCSS

 .bigdrop.select2-container .select2-results {max-height: 200px;} .bigdrop .select2-results {max-height: 200px;} .bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;} 

éditez le fichier select2.css. Aller à l’option hauteur et changer:

 .select2-container .select2-choice { display: block; height: 36px; padding: 0 0 0 8px; overflow: hidden; position: relative; border: 1px solid #aaa; white-space: nowrap; line-height: 26px; color: #444; text-decoration: none; border-radius: 4px; background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%); background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); background-image: linear-gradient(top, #fff 0%, #eee 50%); } 

Ce travail pour moi

 .select2-container--default .select2-results>.select2-results__options{ max-height: 500px; } 

La réponse sélectionnée est correcte mais vous ne devriez pas avoir à modifier le fichier select2.css . Vous pouvez append les éléments suivants à votre propre fichier css personnalisé.

 .select2-container .select2-choice { display: block!important; height: 36px!important; white-space: nowrap!important; line-height: 26px!important; } 

Voici mon sharepoint vue sur la réponse de Carpetsmoker (qui m’a plu car elle était dynamic), nettoyée et mise à jour pour select2 v4:

 $('#selectField').on('select2:open', function (e) { var container = $(this).select('select2-container'); var position = container.offset().top; var availableHeight = $(window).height() - position - container.outerHeight(); var bottomPadding = 50; // Set as needed $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px'); }); 

Je suis venu ici pour chercher un moyen de spécifier la hauteur de la liste déroulante select2-enabled. C’est ce qui a fonctionné pour moi:

 .select2-container .select2-choice, .select2-result-label { font-size: 1.5em; height: 41px; overflow: auto; } .select2-arrow, .select2-chosen { padding-top: 6px; } 

AVANT:

APRÈS:

Semble que les sélecteurs de feuille de style ont changé au fil du temps. J’utilise select2-4.0.2 et le bon sélecteur pour définir la hauteur de la boîte est actuellement:

 .select2-container--default .select2-results > .select2-results__options { max-height: 200px } 

Mettez en queue un autre fichier CSS après le select2.css, et dans ce CSS ajoutez ce qui suit:

 .select2-container .select2-selection { height: 34px; } 

c’est-à-dire si vous voulez que la hauteur de la hauteur de la boîte sélectionnée soit de 34px.

Sur 4.0.6, ci-dessous est la solution qui a fonctionné pour moi. select2-selection__rendered inclure select2-selection__rendered et select2-selection__arrow pour aligner verticalement l’étiquette déroulante et l’icône de la flèche:

 .select2-container .select2-selection, .select2-selection__rendered, .select2-selection__arrow { height: 48px !important; line-height: 48px !important; } 

J’utilise Select2 4.0. Cela fonctionne pour moi. Je n’ai qu’un seul contrôle Select2.

 .select2-selection.select2-selection--multiple { min-height: 25px; max-height: 25px; } 

J’ai eu un problème similaire, et la plupart de ces solutions sont proches mais pas de cigare. Voici ce qui fonctionne dans sa forme la plus simple:

 .select2-selection { min-height: 10px !important; } 

Vous pouvez définir la hauteur minimale à ce que vous voulez. La hauteur augmentera au besoin. Personnellement, j’ai trouvé le rembourrage un peu déséquilibré, et la police trop grande, alors j’ai ajouté celles-ci également.

Je sais que cette question est super vieille, mais je cherchais une solution à cette même question en 2017 et en ai trouvé une moi-même.

 .select2-selection { height: auto !important; } 

Cela ajustera dynamicment la hauteur de votre saisie en fonction de son contenu.

À mon humble avis, régler la hauteur à un nombre fixe est rarement une chose utile à faire. Le réglage de l’espace disponible sur l’écran est beaucoup plus utile.

Quel est exactement ce que fait ce code:

 $('select').on('select2-opening', function() { var container = $(this).select2('container') var position = $(this).select2('container').offset().top var avail_height = $(window).height() - container.offset().top - container.outerHeight() // The 50 is a magic number here. I think this is the search box + other UI // chrome from select2? $('ul.select2-results').css('max-height', (avail_height - 50) + px) }) 

Je l’ai fait pour select2 3.5. Je ne l’ai pas testé avec 4.0, mais d’après la documentation, cela fonctionnera probablement aussi pour 4.0.

Solution paresseuse que j’ai trouvée ici https://github.com/panorama-ed/maximize-select2-height

maximiser-select2-height

Ce package est court et simple. Par magie, il étend vos listes déroulantes Select2 pour remplir la hauteur de la fenêtre.

Il tient compte du nombre d’éléments dans la liste déroulante, de la position de Select2 sur la page, de la taille et de la position de défilement de la page, de la visibilité des barres de défilement et du rendu de la liste déroulante. Et il se redimensionne chaque fois que la liste déroulante est ouverte. Et minifié, c’est ~ 800 octets (y compris les commentaires)!

(Notez que ce plugin est conçu uniquement pour Select2 v4.xx.)

 $("#my-dropdown").select2().maximizeSelect2Height(); 

Prendre plaisir!

Vous n’avez pas besoin de changer la hauteur pour tous les select2 – classes source sont copiées sur select2-container, vous pouvez donc les classer par classes d’entrées. Par exemple, si vous souhaitez définir la hauteur de certaines instances de select2, ajoutez la classe your-class à l’élément source, puis utilisez “.select2-container. your-class dans votre fichier CSS.

Cordialement.

Il y a un problème: les classes comme select2* ne sont pas copiées.

Rapide et facile, ajoutez ceci à votre page: