I have various Select2 dropdowns. I have a issues where when the input is narrow and the drop down is also very small and hard to read.
I have tired:
.select2-dropdown.select2-dropdown--below {
min-width: 300px !important;
}
Which works great:
I am wondering if there is a way to have Select2 automatically adjust the width?
I figured this out as I was drafting the question - Its a combo of CSS and Select2 configuration:
Select2:
width: 'auto'
dropdownAutoWidth : true
CSS:
.select2-results__option {
white-space: nowrap;
}
.select2.select2-container {
width: 100% !important;
}
The nowrap was the key. That forces the option to be full width and then the Select2 config. My added 100% width was to keep the actual input select full width in the table I have these nested in.