使用滚动保持 select2 元素的固定大小? [英] Keeping select2 element a fixed size with scrolling?

问题描述

这里有一个小提琴示例.

这个例子展示的是一个普通的多选 select2 元素，当用户从列表中选择项目时，它会向下扩展并导致父容器向下扩展.出于移动和布局方面的考虑，我不能让父级增长得比设置的大.

What this example shows is with a normal multiple-select select2 element as the user selects items from the list it will expand down and cause the parent container to expand down. I can't have the parent grow any larger than it is set due to mobile and layout concerns.

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

How does one set an option to disable expansion of the element or at the very least set the CSS to keep the size of the element and allow the user to scroll?

以下代码可防止链接腐烂.

Code below to prevent 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();

推荐答案

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

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

或者溢出:自动；可能是更好的选择

Or overflow:auto; may be a better choice

这篇关于使用滚动保持 select2 元素的固定大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！