How to set min-width and max-width of select2 dropdown?

1
votes

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.

enter image description here

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.

enter image description here

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

enter image description here

App in maximized window

enter image description here

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>
2
jquerycssjquery-select2responsivehtml-select
It seems to me that the problem is not in the selects, but in the sidebar. You divided it into 3 columns, right? Could you pass the third column code please? – Tom Lima
I suggest you use the bootstrap class .list-group to list the incidents in the third column. This will maintain responsiveness and you don't have to mess with the select`s. – Tom Lima
@TomLima I added the code. Please see the og post – MARS

2 Answers

0
votes

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>
0
votes

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