Input Width not 100%

[erslater]

I have a multi select inside a bootstrap tab page and the search input is only 10px wide when it first displays.

After clicking on the tab that the multi select appears on the width will expand to 100% once focus is placed on any of the controls in the form.

[PowerKiKi]

Same symptoms here, anything happened since then ?

[havenchyk]

@erslater, could you provide demo?

[PowerKiKi]

Here is a Plunker updated to latest versions of everything and demonstrating the issue: http://plnkr.co/edit/f6o1hxq1Yymc7Vv2oMHb?p=preview

As you can see removing ngAnimate avoid the issue. Unfortunately this is probably not an acceptable solution for real-world cases.

[rywhee]

Having the same issue here....

For now, in my scenario, was able to hack around the problem by tweaking the positioning of related elements. Of course the ui-select-container needs a height...

  .select2-choices {
    position: relative;
  }
  .ui-select-multiple input.ui-select-search {
    width: 100% !important;
    position: absolute;
  }

[TroodoNmike]

i have the same issue. Small hack from rwhee solved problem for me (for now..)

[ma-zal]

Same isssue. But my workaround is:

.ui-select-multiple input.ui-select-search:not(.ng-touched) {
    width: 100% !important;
}

[macem]

This solution not working when we have short select and long text selected because we don't have space to click and add another item.

I prefer to add width: inherit !important and add plus icon for input

[silentHoo]

Same problem here, but for now @macem's solution works

[arbaaz]

Same problem here.

[cdjackson]

Possible duplicate of #1111

[jziggas]

I ran into the same problem while using ui-select inside of a table, inside of angular-ui's Bootstrap tabs. Fixed it by adding a select="tabSelected()" callback to the tab element with $scope.tabSelected = function() { $scope.$applyAsync(); }; in the controller.

[colinbes]

Similar to @rywhee I ended up with a CSS based solution. Mine is a little different due to what I assume to be difference in attr/class naming with different ui-select versions.

I am using ui-select 0.13.2 together with Bootstrap 3's modal.

I included a ".modal" to limit this 'fix' to only ui-select's within a bootstrap modal window.

I also included a min height for ui-select-multiple as due to absolute setting on child (ui-select-search) it had no height.

.modal .ui-select-multiple.ui-select-bootstrap {
  position: relative;
  min-height:29px;
}
.modal .ui-select-multiple input.ui-select-search {
  width: 100% !important;
  position: absolute;
}

[Mobiletainment]

+1 for @ma-zal's solution. Thank you

[ilaipi]

why this is still a bug?

[verjik]

+1 on Version 0.14.0

[fatihkizmaz]

+1 for @ma-zal

[bestconsultant]

+1 on 0.14.2

[hitigon]

+1

[benitezhm]

+1 on 0.14.9

[sergonius]

The width is broken, for me it is always 100%.

[mtr]

I experience the same error both with @PowerKiKi's plunker, where the input size in Tab 2 is always 10px until it been focused.

I experience the same problem using the current (fe0c0c1) master version of ui-select.

[txtbits]

+1 to @mtr
If you put ui-select inside not active tab, the input.ui-select-search starts with width:10px; inline until it been focused.
(tested at 0.16.1)

[ronaldohoch]

Same bug, but this works fine to me:

.form-group .ui-select-container .select2-choices .select2-search-field, .form-group .ui-select-container .select2-choices .select2-search-field input{width:100%!important;}

[yang-zhang-syd]

I have the same problem. When I resize the browser the width of ui select changed to 10px. The following works for me.

input.ui-select-search {
width: 100% !important;
}

[madmis]

+1 - version 0.17.1

[tikijian]

+1
style="width: 10px;"
for some reason

[jkevingutierrez]

+1 on 0.17.1

[hcape]

+1 0.17.1
I have 3 multiple select fields. The 3rd one is disabled until the 1st one is filled in. Bars 1 and 2 have 100% width as expected, but when bar 3 becomes enabled the width is 10px.

[fruzsii]

+1 0.17.1

[Jevonius]

This sounds like a duplicate of #1617 (and probably others) which was fixed in the latest commit in dist; it's effectively version 0.17.2, but the version number wasn't bumped - check the date element. The version I'm using is:
Version: 0.17.1 - 2016-06-09T20:41:58.363Z as of 7ab5f17

I've just tried this, updating the plunkr above, but it's still not working, so appears to be a different issue. Sorry for the confusion!

[rdrscan]

+1 0.18.0

[woolf864]

there is another solution:

ui-select(multiple='', ng-model=data.bind, theme='bootstrap' ng-class="{ 'empty-select': data.bind.empty }")

and in css:

.empty-select input.ui-select-search {
  width: 100% !important;
}

in this solution input does'not have 100% width for all the time

[saumil11]

@ma-zal workaround did the trick for me. Thanks 👍

[Scukerman]

better fix here:

.ui-select-multiple.ui-select-bootstrap.ui-select-container.ng-empty input.ui-select-search { width: 100% !important; }

P.S. Version: 0.19.5

[AndreevskiAleksandar]

+1
Version: 0.19.6
@Scukerman workaround did the trick for me.

[bartvanremortele]

All of the fixes suggested here cause a different issue where the input is being pushed to the next line when updating the model from outside of the component.

[AndreevskiAleksandar]

@bartvanremortele I had the same issue. Dived into the code a bit and found out that the ui-select watches the ng-disabled parameter and updates the search input width.
Just make the ui-select disabled that enable it again after 1ms (just set up a $timeout function with 1ms execution time or no parameter at all).
This is not a solution but a small workaround for now. I still hope that there will be some onItemChange or some method that will expose the re-computing of the inputs size.

[fosron]

@AndreevskiAleksandar Still have the same problem as @bartvanremortele and it won't fix with your solution. Even the documentation http://angular-ui.github.io/ui-select/demo-multiple-selection.html is broken.

[keeprock]

@AndreevskiAleksandar your solution + css one make it work for me. Thanks!

[tproenza]

@keeprock where did it work for you to apply the disable true/false? Thanks in advance!

[colinbes]

This thread seems to be related to pretty old version, I assume you're using latest version?

With latest version I no longer have issue stated in this thread but do have another issue with has been brought up in PR #2045

[Galacticjo28]

Is anyone still experiencing this bug, I am using version 0.19.8 and had to use the css workaround setting the ui-select-search width to 100% !important