如何设置 select2 下拉菜单的最小宽度和最大宽度？

Posted 2023-05-07

【中文标题】如何设置 select2 下拉菜单的最小宽度和最大宽度？

【英文标题】：How to set min-width and max-width of select2 dropdown?

【发布时间】：2021-04-06 05:46:20

【问题描述】：

我在响应式 div 中有一个 select2 下拉菜单。这个 div 还有一个侧边栏元素/列，其中包含用户从下拉列表中的选择。他们可以选择一个选项并将其添加到侧边栏。

一切正常，但我在下拉列表中有一个很长的选项。如果用户选择此项，则父 div 的宽度会被扩展并将侧边栏向下推到 div 下方。

我认为这是因为该选项超出了 select2 的某个预定宽度。将dropdownAutoWidth 设置为false 并不能解决问题，所以我想添加一个dropdownCssClass 和min-width 和max-width 集。

//in script.ts
$("#calltype").select2( dropdownCssClass: 'smalldrop', width: 'auto' );
. . .
//calltype.scss
.smalldrop 
    min-width: 113px !important;
    max-width: 236px !important;

这将解决问题，但现在如果用户更改屏幕尺寸，下拉菜单不会更改其宽度以匹配页面的新宽度。

小窗口应用

最大化窗口中的应用

我能做什么？如何设置下拉菜单的最小和最大宽度，同时仍保持正常 select2 下拉菜单的响应能力？

编辑：请求的侧边栏代码：

<div id="listColumn" class="col-3">
    <div class="incident-container">
        <div id="incidentsListRow" class="row d-none mb-5">
            <div class="col">
                <h6>Incidents:</h6>
                <hr />
                <div class="row no-gutters">
                    <div class="col" id="incidentsList">
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

在我看来问题不在于选择，而在于侧边栏。你把它分成了3列，对吧？请问可以传第三栏代码吗？

我建议您使用引导类 .list-group 在第三列中列出事件。这将保持响应能力，您不必弄乱选择。

@TomLima 我添加了代码。请查看 og 帖子

【参考方案1】：

从documentation，您可以将一个类应用于“原始”<select> 元素并将width: "element" 作为 Select2 参数传递给 使用从任何适用的计算元素宽度CSS 规则。

在下面，您可以看到应用了最大和最小宽度。

$("#calltype").select2(
  width: 'element'
);

$("#calltype2").select2(
  width: 'element'
);

// Just for this demo... To console log the width.
$(".select2-container").on("mouseover", function()
  console.log( $(this).width() )
)

.smalldrop 
  min-width: 113px !important;
  max-width: 236px !important;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<select id="calltype" class="smalldrop">
  <option>min</option>
  <option>aaa</option>
  <option>aaa</option>
</select>
<br>
<select id="calltype2" class="smalldrop">
  <option>A very long option that would be more than the max-with normally...</option>
  <option>aaa</option>
  <option>aaa</option>
</select>

【讨论】：

我将 select2 init 更改为 $("#CallType").select2( width: 'element', dropdownCssClass: 'smalldrop' );，但我仍然看到下拉菜单没有更改其宽度以匹配调整大小的相同问题。

何，调整大小...您是否尝试过一些相对值，例如 % 或 em ？也许固定值会被丢弃。

还是不行。但是，下拉选项正在改变宽度。无论下拉元素的宽度如何，我都可以将它们设置为非常窄或非常宽。

我不知道调整大小是如何发生的......我无法从您发布的内容中重现。检查媒体规则，也许......

【参考方案2】：

历经千辛万苦，我通过在父 div 上设置最小和最大宽度约束解决了这个问题，然后恢复到正常的 seelct2 init。

//in script.ts
$("#calltype").select2( dropdownAutoWidth: true, width: 'auto' );
. . .
//calltype.scss
.parent-div-container 
    max-width: 543px !important;
    min-width: 157px !important;