更改几个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>