通过滚动保持 select2 元素的固定大小？

Posted 2023-05-07

【中文标题】通过滚动保持 select2 元素的固定大小？

【英文标题】：Keeping select2 element a fixed size with scrolling?

【发布时间】：2015-12-23 14:34:20

【问题描述】：

Here is a fiddle for example.

这个例子展示的是一个普通的多选 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();

【参考方案1】：

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

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

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

【讨论】：

完美 *我以为我几小时前就添加了这条评论，并没有注意到它告诉我我需要更多字符。谢谢。

它正在工作.. 但如果你让它像“overlow: auto”，它看起来更漂亮更真实。没有滚动条显示，但像滚动条区域一样工作。

我怎样才能把所有的空间都放到页面底部，然后才能滚动？

【参考方案2】：

对@smcd 版本的一些改进：

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

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

【参考方案3】：

这将适用于最新的 select2 插件：

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

【参考方案4】：

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

【参考方案5】：

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

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

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

那么你可以简单地使用上面的例子，但不是全部。

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

【参考方案6】：

请尝试以下解决方案

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;