csstwitter-bootstrapangularjsjquery-select2

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.

Solution

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

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