How to automatically increase the height of select2 input box (multiple)

Question

I have a select2 input box for multiselet option in which, user can select as many options as he wants, if the selected options are occupying more space than available width then I wanted to increase the height of the select box automatically (don't want scroll option, all options should be in viewable space) and get the remaining options in next line. Currently options are coming in the next line but the height of the select box is not increased.

If I remove the height property in the .select2-container--default .select2-selection--multiple class, it is working. But I want this height property to control the initial height of the select box.

Below is the initial select box height without heigh property in the .select2-container--default .select2-selection--multiple and the auto height works perfectly here.

.select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  height: 22px;
}

JSFiddle: https://jsfiddle.net/rd62bhbm/

Stenographer

You need to add a minimal code so that we can give you a proper response. A jsfiddle.net will be even better. – Rosellaroselle

Edited my question with jsfiddle link – Stenographer

Please review my answer if it helps you, if not, we will find another solution. Thanks. – Elmaleh

Answer 1

Add this CSS to select2-selection--multiple class:

.select2-selection--multiple{
    overflow: hidden !important;
    height: auto !important;
}

Updated Fiddle, I hope it works for you, Thanks.

Elmaleh

How to sort the options in alphabetical order in the initial stage and after every select and unselect? I tried the following which did not work. sorter: function(data) { return data.sort(); } – Stenographer

I am pulling my hairs when finally your solution worked! thanks +1 – Vannavannatta

it is 2023 and why it is still not in default CSS is mystery :) – Mulct

Answer 2

Use min-height:22px instead of height:22px

select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  min-height: 22px;
}

Rosellaroselle

I tried that already, it did not work. Because it is changing the initial height of the select box. I want the initial height of the select box to be 22px to make it uniform with other form input fields. – Stenographer

Because it is changing the initial height of the select box. What is the value in height you want initially? Set that desired height as min-height. – Rosellaroselle

I want it to be 22px and I have put this value for min-height, it is rendering as shown in the second picture but I want it to be rendered as shown in the first picture. – Stenographer

@Stenographer did you find a solution for the issue? – Floris