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).
This turned out to be fairly simple. There was a span element of class select2-selection--multiple
as the parent of the li
s. All I had to do was add overflow-y: auto
and that did the trick. I was not aware of this property.
My select2 combobox, now, looks like the below.
For my further reading - overflow-y description in w3schools
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With