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

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

http://plnkr.co/edit/NkdWUO?p=preview

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.

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

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

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

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

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.

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)