ng-disabled option in angular ui-select shrinks the text box

Question

I am using angular ui-select directive and trying to disable it with ng-disabled option.

<ui-select multiple ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="true"
             reset-search-input="true"
             style="width: 300px;">

Here is the plunker http://plnkr.co/edit/julETCG4zCGAxFJ0PSBF?p=preview

Size of the text box shrinks with ng-disabled="true".

Your plunkr has errors in the console that prevent it from running. — Blazemonger, Nov 05 '14 at 21:25

dmahapatro · Accepted Answer · 2014-11-05T21:52:28.217

4

Update theme from bootstrap to select2 as shown below:

<ui-select multiple ng-model="address.selected"
         theme="select2"
         ng-disabled="true"
         reset-search-input="true"
         style="width: 300px;">

If you want bootstrap theme then add this to style instead:

.ui-select-multiple.ui-select-bootstrap {
    min-height: 34px;        
    height: auto;
    padding: .3em;
}

as shown here.

edited Nov 05 '14 at 21:52

answered Nov 05 '14 at 21:34

dmahapatro

49,365
7
88
117

This was huge for me. Thank You – Sealer_05 Feb 19 '15 at 17:48

ng-disabled option in angular ui-select shrinks the text box

1 Answers1