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/

You need to add a minimal code so that we can give you a proper response. A http://jsfiddle.net/ will be even better. — Roy, Apr 17 '16 at 19:37
Please review my answer if it helps you, if not, we will find another solution. Thanks. — Shady Alset, Apr 18 '16 at 19:04

Shady Alset · Accepted Answer · 2016-04-18T11:45:46.677

26

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.

edited Apr 18 '16 at 11:45

answered Apr 18 '16 at 11:31

Shady Alset

4,850
3
19
31

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(); } – user1614862 Apr 18 '16 at 20:24

score 0 · Answer 2 · answered Apr 17 '16 at 21:04

0

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

answered Apr 17 '16 at 21:04

Roy

1,930
10
17

2

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. – user1614862 Apr 17 '16 at 21:17
`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`. – Roy Apr 17 '16 at 23:11
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. – user1614862 Apr 18 '16 at 03:21
1

@user1614862 did you find a solution for the issue? – Lokomotywa Feb 27 '20 at 10:25

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

2 Answers2

Linked