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

Question

I have a select2 dropdown in a responsive div. This div also has a sidebar element/column that contains the user's selections from the dropdown. They can select an option and it is added to the sidebar.

Everything works fine, but I have one option in the dropdown that is very long. If the user select this, the width of the parent div is expanded and pushes the sidebar down below the div.

I think this is happening because the option is exceeding some predetermined width by select2. Setting dropdownAutoWidth to false doesn't fix the issue, so I thought of adding a dropdownCssClass with min-width and max-width set.

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

This will fix the issue, but now the dropdown isn't changing it's width to match the new width of the page if the user changes the screen size.

App in small window

App in maximized window

What can I do? How can I set the min and max width of the dropdown and still retain the responsiveness of the normal select2 dropdown?

EDIT: Requested sidebar code:

<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

From the documentation , you can apply a class to the "original" <select> element and pass width: "element" as a Select2 parameter to have it to Uses the computed element width from any applicable CSS rules.

Below, you can see that the max and min width are applied.

 $("#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

After much tribulation, I solved the problem by placing min and max-width constraints on the parent div and just reverted to the normal 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

in my case i needed the parent-div to stay at 50px but the select2 drop-down to get 100px

here is what worked for me without importing other libraries (it can be improved )

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