set the width of select2 input (through Angular-ui directive)

Question

I have problem making this plunkr (select2 + angulat-ui) work.

In local setup, I get the select2 work, but I cannot set the width as described in the docs. It is too narrow to be used.

enter image description here

Thank you.

EDIT: Never mind that plnkr, I found a working fiddle here http://jsfiddle.net/pEFy6/

It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap class="input-medium" .Still not sure why angular-ui doesn't take config parameters.

Can you be more specific as far as what you've tried already? The chosen library (on which select2 is based) will generate a width based on the width provided in the HTML/CSS. — Adam Grant
– Adam Grant, Commented Oct 2, 2012 at 2:54

benathon · Accepted Answer · 2014-01-18 01:26:42Z

287

In my case the select2 would open correctly if there was zero or more pills.

But if there was one or more pills, and I deleted them all, it would shrink to the smallest width. My solution was simply:

$("#myselect").select2({ width: '100%' });

answered Jan 18, 2014 at 1:26

benathon

7,6712 gold badges44 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steve Over a year ago

best answer if using select2 version 4.0.0

Ricardo Vigatti Over a year ago

why this is better than $("#myselect").select2({ width: 'resolve' }); ? (seems to be the same)

Fabian S. Over a year ago

@RicardoVigatti: width:'resolve' does only work once on load of the page but not on resize. If your'e using responsive designs it doesnt do the trick

Darragh Enright Over a year ago

resolve didn't work for me - 100%` did. that's half an hour hopelessly searching for an answer "resolved". thanks :)

TNT Over a year ago

This is the best answer so far. But now, for me, the search field doesn't fill all the width. Any easy way to correct this?

Diego Alvarez · Accepted Answer · 2012-11-24 16:54:11Z

231

You need to specify the attribute width to resolve in order to preserve element width

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

answered Nov 24, 2012 at 16:54

Diego Alvarez

2,8471 gold badge18 silver badges16 bronze badges

2 Comments

Adrian P. Over a year ago

$("#myselect").select2({ placeholder: 'Select Country', width: '192px' }); solved my problem with IE and have no effect on FF and Chrome! Thanks!

shinriyo Over a year ago

yes. I also asked author github.com/godbasin/vue-select2/issues/11

Shep · Accepted Answer · 2014-06-01 11:53:20Z

56

This is an old question but new info is still worth posting...

Starting with Select2 version 3.4.0 there is an attribute dropdownAutoWidth which solves the problem and handles all the odd cases. Note it is not on by default. It resizes dynamically as the user makes selections, it adds width for allowClear if that attribute is used, and it handles placeholder text properly too.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

answered Jun 1, 2014 at 11:53

Shep

5864 silver badges3 bronze badges

1 Comment

MrPowerGamerBR Over a year ago

It works pretty well... except if you are using placeholders, if you are, if your options are smaller than the placeholder, the placeholder text will be truncated :(

Sadee · Accepted Answer · 2017-01-20 13:10:34Z

25

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

answered Jan 20, 2017 at 13:10

Sadee

3,22839 silver badges36 bronze badges

Comments

sobelito · Accepted Answer · 2017-05-02 05:46:19Z

15

With > 4.0 of select2 I am using

$("select").select2({
  dropdownAutoWidth: true
});

These others did not work:

dropdownCssClass: 'bigdrop'
width: '100%'
width: 'resolve'

answered May 2, 2017 at 5:46

sobelito

1,62518 silver badges13 bronze badges

Comments

atuk · Accepted Answer · 2014-02-21 12:30:08Z

10

add method container css in your script like this :

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

it will set your select's width same as width your div.

answered Feb 21, 2014 at 12:30

atuk

1091 silver badge3 bronze badges

2 Comments

mkataja Over a year ago

This did the trick for me (I couldn't get select2 to automatically resize with Bootstrap 3). Although I have to say it's a bit hacky.

Nabil Kadimi Over a year ago

This set me on the right track, I replaced display with minWidth: $( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );

Ravindu Lokumanna · Accepted Answer · 2019-06-20 05:48:07Z

7

Add width resolve option to your select2 function

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

After add below CSS to your stylesheet

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

It will sort the issue

answered Jun 20, 2019 at 5:48

Ravindu Lokumanna

711 silver badge2 bronze badges

Comments

self-taught301 · Accepted Answer · 2020-11-10 16:18:47Z

3

Wanted to add my solution here as well. This is similar to Ravindu's answer above.

I added width: 'resolve', as a property within the select2:

    $('#searchFilter').select2({
        width: 'resolve',
    });

Then I added a min-width property to select2-container with !important:

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

On the select element, the style='100px !important;' attribute needed !important to work:

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">

answered Nov 10, 2020 at 16:18

self-taught301

412 bronze badges

Comments

helene · Accepted Answer · 2013-08-20 14:48:47Z

2

Setting width to 'resolve' didn't work for me. Instead, i added "width:100%" to my select, and modified the css like this :

.select2-offscreen {position: fixed !important;}

This was the only solution that worked for me (my version is 2.2.1) Your select will take all the available place, it is better than using

class="input-medium"

from bootstrap, because the select is always staying in the container, even after resizing the window (responsive)

answered Aug 20, 2013 at 14:48

helene

661 bronze badge

1 Comment

Marklar Over a year ago

Thanks for the solution but it only worked for me on first load. Once I selected a tag and then clicked on another page element the select2 input went back to the incorrect size

doncadavona · Accepted Answer · 2021-03-16 14:49:03Z

2

Add this in your stylesheet:

.select2 {
  width: unset !important;
}

answered Mar 16, 2021 at 14:49

doncadavona

7,8209 gold badges46 silver badges59 bronze badges

Comments

Solomon Tesfaye · Accepted Answer · 2021-03-22 09:36:13Z

1

Other Way you can use is setting width in style on your Select tag.

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

Then, use this

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});

answered Mar 22, 2021 at 9:36

Solomon Tesfaye

3665 silver badges11 bronze badges

Comments

Bablu Ahmed · Accepted Answer · 2019-01-01 05:11:23Z

0

You can try like this. It works for me

$("#MISSION_ID").select2();

On hide/show or ajax request, we have to reinitialize the select2 plugin

For example:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

answered Jan 1, 2019 at 5:11

Bablu Ahmed

5,1407 gold badges62 silver badges73 bronze badges

Comments

Adrian P. · Accepted Answer · 2019-01-25 19:20:54Z

0

Easier CSS solution independent from select2

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

answered Jan 25, 2019 at 19:20

Adrian P.

5,2482 gold badges50 silver badges49 bronze badges

Comments

Abdelsalam Shahlol · Accepted Answer · 2019-07-17 18:05:06Z

On a recent project built using Bootstrap 4, I had tried all of the above methods but nothing worked. My approach was by editing the library CSS using jQuery to get 100% on the table.

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

Working Demo

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Creek · Accepted Answer · 2022-07-13 02:29:27Z

0

This is work for me. After create select componant and then add your customer css attribute.

$(select).select2({
//....create select componant content
});

$("span.select2-container").addClass(yourDefClass);

In the css file. configure your style and add !important.

.yourDefClass{
    width: 700px !important;
}

answered Jul 13, 2022 at 2:29

Creek

2151 gold badge2 silver badges12 bronze badges

Comments

dominique Goubet · Accepted Answer · 2024-07-24 14:03:21Z

0

With Select2 v4.1.0 (https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js) none of the solutions above did work. But .select2-container { min-width: 100%; } did the trick

Hope this can help

answered Jul 24, 2024 at 14:03

dominique Goubet

1

Collectives™ on Stack Overflow

set the width of select2 input (through Angular-ui directive)

16 Answers 16

5 Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

5 Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related