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

【问题标题】：How to set min-width and max-width of select2 dropdown?如何设置 select2 下拉菜单的最小宽度和最大宽度？
【发布时间】：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 帖子

标签： jquery css jquery-select2 responsive html-select

【解决方案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;
}

【讨论】：