Question

此示例显示的是使用普通的多选select2元素，因为用户从列表中选择项目，它将向下扩展并导致父容器向下扩展。由于移动和布局方面的考虑，我不能让父母的成长比设定的大。

如何设置禁用元素扩展的选项，或者至少设置CSS以保持元素的大小并允许用户滚动？

以下代码以防止linkrot。

HTML：

<form>
  <select class="select-select2" multiple="multiple" data-placeholder="Please choose one or more" data-allow-clear="true" data-close-on-select="false">
    <option>Lorem</option>
    <option>ipsum</option>
    <option>dolor</option>
    <option>sit amet</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    <option>elit sed</option>
    <option>do eiusmod</option>
    <option>tempor</option>
    <option>incididunt</option>
    <option>ut labore</option>
    <option>et dolore</option>
    <option>magna aliqua</option>
    <option>Ut enim ad</option>
  </select>

  <button type="submit">Submit</button>
</form>

JS：

$(".select-select2").select2();

Answer 1

http://jsfiddle.net/8svf11yh/1/

.select2-container .select2-selection {
    height: 60px;
    overflow: scroll;
}

或溢出：自动;可能是一个更好的选择

Answer 2

@ smcd版本的一些改进：

.select2-selection--multiple { max-height: 10rem; overflow: auto }

我正在使用max-height，因此如果只选择了几个选项，它就会更小。只有达到那个高度，它才会变得更大。正如所建议的那样overflow: auto很棒，因为它只在需要时才使用滚动条。最后，我定位了选择器的--multiple变体，因此只有具有多个选项的选项才能获得此样式。

Answer 3

这适用于最新的select2插件：

.select2-results__options {
    height: 60px;
    overflow-y: auto;
}

Answer 4

转到select2.min.css，然后应用以下更改：

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
width: 100% !important;
vertical-align: middle}

到

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle}

通过滚动将select2元素保持为固定大小？

4 个答案: