CODEWITHSUNDEEP
jquerycssjquery-select2responsivehtml-select
MARS
MARS

Reputation: 587

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

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>

Upvotes: 3

Views: 8943

Answers (3)

zakaria35
zakaria35

Reputation: 1077

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

Upvotes: 0

MARS
MARS

Reputation: 587

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

Upvotes: 3

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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>

Upvotes: 0

Related Questions