CODEWITHSUNDEEP
jquery-select2
Matt Sims
Matt Sims

Reputation: 563

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

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!

Upvotes: 19

Views: 22063

Answers (9)

Nattachai Noogure
Nattachai Noogure

Reputation: 1

I found this method works for me on Select2 4.0.6

$('mySelect2').select2({ width: "inherit" ..... })

Upvotes: 0

vruyr
vruyr

Reputation: 1

give width to the select's parent element on percentage you want, and then give

$('mySelect2').select2({ width: "inherit" ..... })

Upvotes: 0

Marko Balaban
Marko Balaban

Reputation: 1

For other than problems of responsive width, read the documentation of Select2. Everything is explained.

https://select2.org/appearance#container-width

<select class="js-example-responsive" style="width: 50%"></select>

$(".js-example-responsive").select2({
   width: 'resolve' // need to override the changed default
});

Upvotes: 0

Michael
Michael

Reputation: 141

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);
        
    });
});

Upvotes: 7

saleh mosleh
saleh mosleh

Reputation: 145

For dynamically resize a select2 you can use width: 'style' option as below:

$('#field_'+field.name).select2({
    placeholder: "select a option...",
    maximumSelectionLength: 1000 , 
    allowClear: true,
    ...
    width: 'style',
    data: data
});

And next you have to use style="width:100%;" as attribute for your select tag.

<select class="input-element-item fontsize13" id="select2" style="width:100%;" >
    <option></option>
</select>

Upvotes: 0

Brayam Valero
Brayam Valero

Reputation: 94

I know this is an old post However, I had an issue when I used NMC's code.

As I can't comment on his answer, after using his code I had some annoying scrollbars appearing after using the select2 dropdowns, to fix this I used width auto instead.

.select2-container {
    width: auto !important;
}

Upvotes: 3

Andrey
Andrey

Reputation: 11

$('.select2-search__field').attr('style','width:auto');

$('.select2-search__field[placeholder=""]').attr('style','width:10px');

Upvotes: 1

NMC
NMC

Reputation: 1326

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)

Upvotes: 58

rob-gordon
rob-gordon

Reputation: 1488

Just had to do something like this for a site

$(e).on("select2:closing", function(e) {
    if (e.hasOwnProperty('params') &&
        e.params.hasOwnProperty('args') && 
        e.params.args.hasOwnProperty('originalEvent') && 
        e.params.args.originalEvent.hasOwnProperty('target')) {
            var newWidth = $(e.params.args.originalEvent.target).width();
            var id = $(e.params.args.originalEvent.target).attr('id');
            var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
            $(container).parents('span.select2').width(newWidth + 21);
    }
});

This is probably not fool-proof and is tied to the current API. But it gets the width of the element in the dropdown before the dropdown closes and then applies that to the container.

One thing of note, you may need to float the dropdown items to get their real size.

.select2-results__option {
    float: left;
    clear: both;
}

Upvotes: 1

Related Questions