CODEWITHSUNDEEP
jquery-select2
Dan Tappin
Dan Tappin

Reputation: 3032

Make Select2 wider than the input?

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.

enter image description here

I have tired:

.select2-dropdown.select2-dropdown--below {

  min-width: 300px !important;

}

Which works great:

enter image description here

I am wondering if there is a way to have Select2 automatically adjust the width?

Upvotes: 2

Views: 1014

Answers (1)

Dan Tappin
Dan Tappin

Reputation: 3032

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.

Upvotes: 2

Related Questions