javascript 通过滚动保持 select2 元素的固定大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32787618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keeping select2 element a fixed size with scrolling?
提问by o_O
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.
这个例子展示的是一个普通的多选 select2 元素，当用户从列表中选择项目时，它会向下扩展并导致父容器向下扩展。由于移动和布局问题，我不能让父级增长得比它设置的更大。
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?
如何设置一个选项来禁用元素的扩展或至少设置 CSS 以保持元素的大小并允许用户滚动？
Code below to prevent linkrot.
下面的代码可以防止链接腐烂。
HTML:
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:
js：
$(".select-select2").select2();
回答by smcd
http://jsfiddle.net/8svf11yh/1/
http://jsfiddle.net/8svf11yh/1/
.select2-container .select2-selection {
height: 60px;
overflow: scroll;
}
Or overflow:auto; may be a better choice
或溢出：自动；可能是更好的选择
回答by Eric Anderson
A few refinements to @smcd's version:
对@smcd 版本的一些改进：
.select2-selection--multiple { max-height: 10rem; overflow: auto }
I am using max-heightso that it can be smaller if only a few options are selected. Only once it reaches that height does it grow no bigger. As suggested overflow: autois great as it only uses the scrollbar if needed. Finally I target the --multiplevariant of the selector so only selections with multiple options get this styling.
max-height如果只选择了几个选项，我正在使用它可以更小。只有当它达到那个高度时，它才不会变大。正如建议overflow: auto的那样很棒，因为它只在需要时使用滚动条。最后，我针对--multiple选择器的变体，因此只有具有多个选项的选择才能获得此样式。
回答by adamj
This'll work with the latest select2 plugin:
这将适用于最新的 select2 插件：
.select2-results__options {
height: 60px;
overflow-y: auto;
}
回答by marwan130
go to select2.min.css then apply these changes:
转到 select2.min.css 然后应用这些更改：
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
width: 100% !important;
vertical-align: middle}
to
到
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle}
