How can I dynamically resize a select2 input to be the same width as the selected option?

Question

I'm building a 'natural language' search form using a series of inline select inputs, using jQuery Select2 for styling. The widths of the Select2 inputs appear to be set to the width of the selected option on initialisation, which is great. I just can't work out how to get the width to update when the selected option is changed. Any ideas?

Many thanks!

Answer 1

Try to add this to yor CSS file:

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

It solved my resize problems with select2

(Edited: I do not use placeholders)

Answer 2

You can use window resize function.

Example:

// Fix select2 width
$(window).on('resize', function() {
    $('.form-group').each(function() {
        var formGroup = $(this),
            formgroupWidth = formGroup.outerWidth();
        
        formGroup.find('.select2-container').css('width', formgroupWidth);
        
    });
});