As and when I keep selecting multiple options in a select2 element, the text-area displaying the current selections keeps expanding, like the below:

I tried fix height of classes like select2-selection and select2-container. That did not help me. I ended up with something like the below.

My requirement - I want to fix the height and width of the text area and all the options must be rendered within it. (Since, this will be part of a small pop-up and there are size restrictions).

As and when I keep selecting multiple options in a select2 element, the text-area displaying the current selections keeps expanding, like the below:

I tried fix height of classes like select2-selection and select2-container. That did not help me. I ended up with something like the below.

My requirement - I want to fix the height and width of the text area and all the options must be rendered within it. (Since, this will be part of a small pop-up and there are size restrictions).

• javascript
• jquery-select2

• Could you please provide your question with test example – Maxim Zhukov Commented Mar 30, 2015 at 11:42
• Point taken - I will use jsfiddle the next time I post a question. Thanks! – Sriram Commented Mar 30, 2015 at 11:57

1 Answer 1

This turned out to be fairly simple. There was a span element of class select2-selection--multiple as the parent of the lis. All I had to do was add overflow-y: auto and that did the trick. I was not aware of this property.

My select2 bobox, now, looks like the below.

For my further reading - overflow-y description in w3schools