En gardant select2 élément d'une taille fixe à défilement?

Voici un violon par exemple.

Ce que cet exemple montre est normal, la sélection de plusieurs select2 élément que l'utilisateur sélectionne les éléments de la liste, il étendra vers le bas et causer le conteneur parent pour développer vers le bas. Je ne peux pas avoir le parent grossir que c'est en raison de mobile et la mise en page des préoccupations.

Comment peut-on définir une option pour désactiver l'expansion de l'élément ou, à tout le moins à la CSS pour garder la taille de l'élément et de permettre à l'utilisateur de faire défiler?

Code ci-dessous pour éviter linkrot.

HTML:

<form>
  <select class="select-select2" multiple="multiple" data-placeholder="Please choose one or more" data-allow-clear="true" data-close-on-select="false">
    <option>Lorem</option>
    <option>ipsum</option>
    <option>dolor</option>
    <option>sit amet</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    <option>elit sed</option>
    <option>do eiusmod</option>
    <option>tempor</option>
    <option>incididunt</option>
    <option>ut labore</option>
    <option>et dolore</option>
    <option>magna aliqua</option>
    <option>Ut enim ad</option>
  </select>

  <button type="submit">Submit</button>
</form>

js:

$(".select-select2").select2();

OriginalL'auteur o_O | 2015-09-25

8

http://jsfiddle.net/8svf11yh/1/
```
.select2-container .select2-selection {
    height: 60px;
    overflow: scroll;
} 
```
Ou overflow:auto; peut-être un meilleur choix

Parfait *j'ai pensé que j'ai ajouté ce commentaire il y a quelques heures et n'a pas remarqué qu'il me disait que j'avais besoin de plus de caractères. Merci.
Merci ça fonctionne......
sa fonctionne.. mais si vous le faites comme " overlow: auto ", il semble de plus beau et de l'authentique. aucune barre de défilement indique, mais fonctionne comme une barre de défilement de la zone.

OriginalL'auteur smcd
6

Quelques améliorations à @smcd version:
```
.select2-selection--multiple { max-height: 10rem; overflow: auto }
```
Je suis en utilisant max-height de sorte qu'il peut être plus petit si seules quelques options sont sélectionnées. Seulement une fois qu'il atteint la hauteur de ce qu'il ne poussent pas plus grand. Comme l'a suggéré overflow: auto est grande car elle n'utilise la barre de défilement si nécessaire. Enfin, je cible le --multiple variante du sélecteur de sorte que seules les sélections avec de multiples options obtenir ce style.

OriginalL'auteur Eric Anderson

Cette allons travailler avec la dernière select2 plugin:

.select2-results__options {
    height: 60px;
    overflow-y: auto;
}

OriginalL'auteur adamj

aller à select2.min.css puis appliquer ces modifications:

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
width: 100% !important;
vertical-align: middle}

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle}

OriginalL'auteur marwan130

Vous devez vous connecter pour publier un commentaire.