如何在滚动时保持select2元素的固定大小？

Question

这里是一个示例。

该示例展示了使用普通的多选select2元素时，当用户从列表中选择项目时，它将向下展开并导致父容器向下展开。由于移动设备和布局问题，我不能让父容器变得更大。

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

以下是代码，防止链接失效。

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();

- o_O

Answer 1

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

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

或者使用overflow:auto;可能是更好的选择。

- smcd

---

我以为几个小时前我已经添加了这个评论，但没有注意到它告诉我需要更多的字符。谢谢。 - o_O

它正在工作...但是如果你将其设置为"overflow: auto"，它看起来更美观和真实。没有滚动条显示，但它的功能就像滚动条区域一样。 - saadk

如何使它占据页面底部的所有空间，然后才能滚动？ - pilat

Answer 2

@smcd的版本需要一些改进：

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

我正在使用max-height，以便在仅选择少数选项时它可以更小。只有达到该高度时，它才不会再增大。建议使用overflow: auto，因为它仅在需要时使用滚动条。最后，我针对选择器的--multiple变体进行目标定位，因此仅具有多个选项的选择才会获得这种样式。

- Eric Anderson

Answer 3

这将与最新的select2插件配合使用：

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

- adamj

Answer 4

在select2中，您可以为特定部分添加类以更改其外观。

如果您只想将其应用于特定元素而不是所有元素，则这非常方便。

 $(".select2-my-special-select").select2({
     containerCssClass: "my-select2-container-class",
     dropdownCssClass: "test"
 });

然后你可以简单地使用像上面那样的示例，但并非全部都是如此。

.my-select2-container-class {
    height: 60px;
    overflow-y: scroll;
} 

- Goddard

Answer 5

请尝试以下解决方案。

selection--multiple .select2-selection__rendered {
        display: inline-block;
        overflow: hidden;
            overflow-y: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-height: 100px;
        overflow-y: auto;
    }

- Sharad Tiwari

Answer 6

前往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}

- Marouane K