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

时间:2015-09-25 17:29:18

标签: javascript jquery html css jquery-select2

Here is a fiddle for example.

此示例显示的是使用普通的多选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();

4 个答案:

答案 0 :(得分:8)

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

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

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

答案 1 :(得分:6)

@ smcd版本的一些改进:

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

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

答案 2 :(得分:1)

这适用于最新的select2插件:

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

答案 3 :(得分:0)

转到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}