Modification de la hauteur d'un seul des conteneurs select2

Question

J'essaie d'augmenter la hauteur d'un conteneur de sélection select2 tout en laissant les autres conteneurs à la hauteur par défaut. Mes largeurs de conteneur sont fixes et je ne veux pas qu'une ligne blanche soit forcée dans le conteneur lorsque je choisis une seconde option (cela se produirait si j'utilisais 'height-min'). Vous aurez des idées sur la façon dont je peux contrôler le premier conteneur tout en laissant les 2e et 3e conteneurs tout seuls? Plusieurs messages sur cela déjà mais rien ne semble fonctionner.

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js 
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css 


<select id="dropList1" style="width:125px;" multiple="multiple"> 
    <option value="Sun">Sun</option> 
    <option value="Moon">Moon</option> 
    <option value="Stars">Stars</option> 
</select> 
<br> 
<br> 
<br> 
<select id="dropList2" style="width:125px" multiple="multiple"> 
    <option value="Earth">Earth</option> 
    <option value="Wind">Wind</option> 
</select> 
<br> 
<br> 
<br> 
<select id="dropList3" style="width:125px" multiple="multiple"> 
    <option value="Fire">Fire</option> 
    <option value="Water">Water</option> 
</select> 




$("#dropList1").select2({ placeholder: "Select type",}); 
$("#dropList2").select2({ placeholder: "Select type",}); 
$("#dropList3").select2({ placeholder: "Select type",}); 



body { 
padding: 30px; 
} 

.select2-container .select2-selection--multiple { 
font-family: 'Arial', Verdana; 
font-size: 12px; 
box-sizing: border-box; 
display: block; 
height: 27px; 
} 

Answer 1

Vous pouvez augmenter la hauteur en ajoutant ceci à votre code CSS

#dropList1 + .select2-container--default .select2-selection--multiple{ 
    height: 100px; 
} 

noter que la hauteur sera fixée

mais si vous voulez qu'il soit augmenté automatiquement en fonction de la élément à l'intérieur vous devez utiliser auto à la place

#dropList1 + .select2-container--default .select2-selection--multiple{ 
    height: auto; 
} 

et thi s n'affectera que la première sélectionnez avec ID = # dropList1

vous pouvez également réduire l'espace entre les options sélectionnées dans le champ de saisie pour éviter le saut de ligne inutile en ajoutant ce code:

#dropList1 + .select2-container--default .select2-selection--multiple .select2-selection__choice{ 
     margin-right: 1px; 
} 

See JSfiddle

Answer 2

Vous pouvez simplement ajouter une classe personnalisée à la balise de sélection requise et inclure la hauteur souhaitée dans le CSS. Voici le code ci-dessous:

body { 
 
padding: 30px; 
 
} 
 

 
.select2-container .select2-selection--multiple { 
 
font-family: 'Arial', Verdana; 
 
font-size: 12px; 
 
box-sizing: border-box; 
 
display: block; 
 
height: 27px; 
 
} 
 
.ChangedHeight{ 
 
height: 200px!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js 
 
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css 
 

 

 
<select id="dropList1" style="width:125px;" multiple="multiple"> 
 
    <option value="Sun">Sun</option> 
 
    <option value="Moon">Moon</option> 
 
    <option value="Stars">Stars</option> 
 
</select> 
 
<br> 
 
<br> 
 
<br> 
 
<select id="dropList2" class="ChangedHeight" style="width:125px" multiple="multiple"> 
 
    <option value="Earth">Earth</option> 
 
    <option value="Wind">Wind</option> 
 
</select> 
 
<br> 
 
<br> 
 
<br> 
 
<select id="dropList3" style="width:125px" multiple="multiple"> 
 
    <option value="Fire">Fire</option> 
 
    <option value="Water">Water</option> 
 
</select>

Vous pouvez même ajouter du style en ligne dans la balise select.

Answer 3

Pour écraser la première balise Select, utilisez le montre CSS code

Il y a un modèle utilisé par SELECT2 plugin pour créer le HTML pour le tag personnalisé SELECT. Ainsi, en utilisant le même modèle, vous pouvez remplacer votre étiquette souhaitée SELECT2.

$("#dropList1").select2({ 
 
    placeholder: "Select type", 
 
}); 
 
$("#dropList2").select2({ 
 
    placeholder: "Select type", 
 
}); 
 
$("#dropList3").select2({ 
 
    placeholder: "Select type", 
 
});

body { 
 
    padding: 30px; 
 
} 
 

 
.select2-container .select2-selection--multiple { 
 
    font-family: 'Arial', Verdana; 
 
    font-size: 12px; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    height: 27px; 
 
} 
 

 
#dropList1+.select2 .select2-selection--multiple { 
 
    height: auto !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<h3>Managing the wrapper height to collect all selected tags properly</h3> 
 
<select id="dropList1" class="select-one" style="width:125px" multiple="multiple"> 
 
    <option value="Sun">Sun</option> 
 
    <option value="Moon">Moon</option> 
 
    <option value="Stars">Stars</option> 
 
</select> 
 

 
<br> 
 
<br> 
 
<br> 
 
<h3>Default behaviour of the SELECT tag, the tags flow out of wrapper.</h3> 
 

 
<select id="dropList2" style="width:125px" multiple="multiple"> 
 
    <option value="Earth">Earth</option> 
 
    <option value="Wind">Wind</option> 
 
    <option value="Moon">Moon</option> 
 
    <option value="Stars">Stars</option> 
 
</select> 
 
<br> 
 
<br> 
 
<br> 
 
<select id="dropList3" style="width:125px" multiple="multiple"> 
 
    <option value="Fire">Fire</option> 
 
    <option value="Water">Water</option> 
 
</select>