Search code examples
javascriptcssangularjsangular-uiangularjs-select2

select2 container smaller than dropdown

I've implemented angular-ui select2 into my application and it's working fine but the rendering of the select box container (above search) is smaller than the dropdown panel.

Here's what I mean:

enter image description here enter image description here

HMTL: 

<select 
    ui-select2="{placeholder:'Select a User', dropdownAutoWidth: true}"
    class="animated slideInDown" 
    id="entityDropDown" 
    ng-model="selectedUser" 
    ng-options="user as user.name for user in users" 
    ng-change="getUserInfo(selectedUser)"> <option>Place Holder</option>
</select>
Solution

  • Add to your ctor parameters width:

    <select
  ui-select2="{placeholder:'Select a User', dropdownAutoWidth: true, width: '100%'} >
</select>

    Should work.