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?