Multi-level (word wrap) selects selection in angular -ui-select

Question

Is it possible to make a selection in angular -ui-select multilined? I know that you cannot do this in the standard input of choice, but here it should be possible. If you are a CSS guru, plunker is here: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

<ui-select ng-model="address.selected" theme="bootstrap" ng-disabled="disabled" reset-search-input="false" style="width: 300px;"> <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match> <ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0"> <div ng-bind-html="address.formatted_address | highlight: $select.search"></div> </ui-select-choices> </ui-select> 

Answer 1

This is due to the white space of the CSS property, which is set to nowrap in the default ui-select stylesheet.

You can change this behavior by adding this to your own css:

 .ui-select-bootstrap .ui-select-choices-row > a{ white-space: normal; } 

This will change the behavior of all ui-selects on your page. If you want to change only one, you can wrap it in a div:

  <div class="multiline-select"> <ui-select (...)> (...) </ui-select> </div> 

and change the css selector

 div.multiline-select .ui-select-bootstrap .ui-select-choices-row > a{ white-space: normal; } 

I split your plunkr to show the result http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview

Answer 2

For later versions of ui-select (I use 0.19.3) it looks like the a element has been replaced with a span .

In addition, so that the wrapper and the word border work correctly around the ui-select-match in the bootstrap theme, the height from .form-control prevents the border from moving around the new line so that the second rule holds:

 div.multiline-select .ui-select-bootstrap .ui-select-choices-row > span { white-space: normal; } div.multiline-select .ui-select-bootstrap .ui-select-match > span.btn { white-space: normal; height: auto; } 

The working plunkr forked by Vincent and updated to 0.19.3: http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

Answer 3

Looking at this, it doesn't seem to work for the bootstrap style (was this the original question?) It seems that with bootstrap, it works for a drop-down list, but not for the resulting window (where it overflows).

This forked plunkr demonstrates:

http://plnkr.co/edit/fMMSKuPMZwjgVCfV4n6d?p=preview

Note. I changed this:

 <ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 200px;">