Menu
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/
878
You can also use css to set the height of the select2-results (the drop down portion of the select control). 200px is the default height, so change it for the desired height of the drop down. You probably want to give a special class to your select2 first, then modify the css for that class only, rather than changing all select2 css, sitewide.
.select2-choices { min-height: 150px; max-height: 150px; overflow-y: auto; }. That should give you a set height of 150px and it will scroll if needed. Simply adjust the height till your image fits as desired. You can also use css to set the height of the select2-results (the drop down portion of the select control).
That should give you a set height of 150px and it will scroll if needed. Simply adjust the height till your image fits as desired. You can also use css to set the height of the select2-results (the drop down portion of the select control). 200px is the default height, so change it for the desired height of the drop down.
At the moment if you have a text input control set to multiline, there is no easy way to make the text input box grow and shrink in height to accomodate the text entered. All that happens if you enter more text is that a scrollbar appears.
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.
88
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
