Input Width not 100%

[erslater]

trafficstars

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 (fe0c0c12522d48d677fff8ca21d366ba37d8f90d) 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 https://github.com/angular-ui/ui-select/commit/7ab5f175421e8d263e4e6c5eb38a215b4c515c42

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!