通过滚动使 select2 元素保持固定大小?
Keeping select2 element a fixed size with scrolling?
这个例子展示的是一个普通的多select select2元素作为用户列表中的selects项,它将向下扩展并导致父容器向下展开。由于移动和布局方面的问题,我不能让父级增长到比设置的更大。
如何设置选项以禁用元素扩展或至少设置 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();
http://jsfiddle.net/8svf11yh/1/
.select2-container .select2-selection {
height: 60px;
overflow: scroll;
}
或overflow:auto;可能是更好的选择
@smcd 版本的一些改进:
.select2-selection--multiple { max-height: 10rem; overflow: auto }
我正在使用 max-height
,这样如果只选择几个选项,它可以更小。只有当它达到那个高度时,它才不再变大。正如建议的那样 overflow: auto
很棒,因为它只在需要时使用滚动条。最后,我将选择器的 --multiple
变体作为目标,因此只有具有多个选项的选择才会获得此样式。
这将适用于最新的 select2 插件:
.select2-results__options {
height: 60px;
overflow-y: auto;
}
转到 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 中,您可以将 类 添加到特定部分以更改其外观。
如果您只想将其应用于特定元素而不是所有元素,这会很方便。
$(".select2-my-special-select").select2({
containerCssClass: "my-select2-container-class",
dropdownCssClass: "test"
});
那么你可以简单地使用上面的例子,但不是所有的。
.my-select2-container-class {
height: 60px;
overflow-y: scroll;
}
请尝试以下解决方案
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;
}
这个例子展示的是一个普通的多select select2元素作为用户列表中的selects项,它将向下扩展并导致父容器向下展开。由于移动和布局方面的问题,我不能让父级增长到比设置的更大。
如何设置选项以禁用元素扩展或至少设置 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();
http://jsfiddle.net/8svf11yh/1/
.select2-container .select2-selection {
height: 60px;
overflow: scroll;
}
或overflow:auto;可能是更好的选择
@smcd 版本的一些改进:
.select2-selection--multiple { max-height: 10rem; overflow: auto }
我正在使用 max-height
,这样如果只选择几个选项,它可以更小。只有当它达到那个高度时,它才不再变大。正如建议的那样 overflow: auto
很棒,因为它只在需要时使用滚动条。最后,我将选择器的 --multiple
变体作为目标,因此只有具有多个选项的选择才会获得此样式。
这将适用于最新的 select2 插件:
.select2-results__options {
height: 60px;
overflow-y: auto;
}
转到 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 中,您可以将 类 添加到特定部分以更改其外观。
如果您只想将其应用于特定元素而不是所有元素,这会很方便。
$(".select2-my-special-select").select2({
containerCssClass: "my-select2-container-class",
dropdownCssClass: "test"
});
那么你可以简单地使用上面的例子,但不是所有的。
.my-select2-container-class {
height: 60px;
overflow-y: scroll;
}
请尝试以下解决方案
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;
}