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

您只需将自定义 class 添加到所需的 select 标签，并在 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 2

您可以通过将此添加到您的 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

的第一个 select

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

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

See JSfiddle

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>

仅更改几个 select2 容器之一的高度

Changing the height of just one of several select2 containers

css

jquery

select2