如何設置 select2 下拉菜單的最小寬度和最大寬度？

Question

我在響應式 div 中有一個 select2 下拉菜單。 這個 div 還有一個側邊欄元素/列，其中包含用戶從下拉列表中的選擇。 他們可以選擇 select 並將其添加到側邊欄。

一切正常，但我在下拉列表中有一個很長的選項。 如果用戶 select 這個，則父 div 的寬度被擴展並將側邊欄向下推到 div 下方。

我認為發生這種情況是因為該選項超出了 select2 的某個預定寬度。 將dropdownAutoWidth設置為false並不能解決問題，因此我想添加一個設置了min-width和max-width的dropdownCssClass 。

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

這將解決問題，但如果用戶更改屏幕尺寸，現在下拉菜單不會更改其寬度以匹配頁面的新寬度。

小應用程序 window

應用程序在最大化 window

我能做些什么？ 如何設置下拉菜單的最小和最大寬度並仍然保留正常 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>

Answer 1

從文檔中，您可以將 class 應用於“原始” <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>

Answer 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;
}

Answer 3

在我的情況下，我需要 parent-div 保持在 50px，但 select2 下拉菜單需要 100px

這是在不導入其他庫的情況下對我有用的方法（可以改進）

    $(function () {
        $(document).ready(function () {
            ...
            $(".select2-selection").on('click', function() {
                $('.select2-dropdown').css('min-width', '100px');
            });
    });