jquery - 仅更改几个 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;
}

note that the height will be fixed

但是如果你想让它根据里面的元素自动增加你需要使用auto来代替

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

这只会影响 ID = #dropList1

的第一个选择

您还可以通过添加以下代码来减少输入字段中所选选项之间的空间以避免不必要的换行:

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

See JSfiddle