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

这只会影响 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>

您甚至可以在 select 标签中添加内联样式。

Answer 3

要覆盖第一个 Select 标记，请使用显示的 CSS code

SELECT2 插件使用了一种模式来为自定义 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>