更改幾個select2容器中的一個的高度

Question

我試圖增加select2下拉容器的高度，而將其他容器保留在默認高度。我的容器寬度是固定的，當我選擇第二個選項時（如果我使用'height-min'，會發生這種情況），我不想將空行強行插入容器中。你會see all this in the jsfiddle

任何任何想法，我可以如何控制第一個容器，同時離開第二個和第三個容器？這已經幾個職位，但似乎沒有任何工作。

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

您可以通過添加這對你的CSS代碼

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

注意，高度將被固定

，但如果你希望它增加自動根據增加高度元件裏面你需要用auto來代替

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

and thi旨意隻影響第一與ID選擇= ＃dropList1

還可以減少在輸入字段所選的選項之間的空間通過將該代碼，以避免不必要的換行符：

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

See JSfiddle

Answer 2

您可以簡單地將自定義類添加到所需的選擇標記並在CSS中包含所需的高度。這裏是下面的代碼：

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>

你甚至可以在選擇標記添加內嵌樣式。

Answer 3

對於重寫第一Select標籤中，使用所示CSS code

有由中使用的圖案插件用於爲定製SELECT標籤創建HTML。因此，通過使用相同的模式，您可以覆蓋所需的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>