Select2 dropdown auto width not working properly

Question

I use select2 to set dropdownautowidth to true on a SharePoint search page, and it works great on page loading for the first time. After searching for a certain keyword, the page loads with the search results, and then dropdownautowidth does not set the truth in any way. I use the operator $('#ddlCategory').select2({dropdownAutoWidth : true}); for my document.ready function.

Any help is appreciated.

Answer 1

This worked for me:

 $('select').select2({ dropdownAutoWidth : true, width: 'auto' }) 

Answer 2

you need to quote it, for example:

 $('#ddlCategory').select2({dropdownAutoWidth: 'true'}); 

it works for me.

Answer 3

In select2 4.0.0, this will not work either. I am using this workaround:

 $('select').select2(); 

css:

 select + .select2-container { width: 100% !important; } 

Answer 4

CSS customization for .select2-container class from display: inline-block; before display: block; worked for me.

Answer 5

I just put the width: 'auto' parameter in the function call, and then it works fine.

 $('#months').select2({ width: 'auto', allowClear: false, height: '100%', });