Using the no-wrap clas in the select in order to display multiline options

[wuilliam321]

This allows the user to have options with multilines if the option names are too long.

[Jefiozie]

Can you explain a bit more on this PR? And why is this only needed for the bootstrap theme?
Thanks.

[wuilliam321]

The reason is: If you have to display a select tag in a short space col-md-2 for example, additionally with very long names, you will see that the option only uses one line, and sometimes we need to display the full option text, with no-wrap this Is possible. This is the main reason. Why bootstrap? We are using it.

Thanks for response

@Jefiozie See the pictures:

• Before
  

• Now
  

[DarthVanger]

Related to issue #1278

[SebSob]

@wuilliam321 Nice, this fix works and shows the label correctly when the dropdown is open, but once selected the label get overflowed:

Can you help?

[DarthVanger]

@SebSob Did you restrict width of your <ui-select> ? What you're showing is not overflow, but the whole input gets wider.

See this plunker which has 300px width for the <ui-select>, and the selected text gets cut.
https://plnkr.co/edit/RXNBGedUZktGShnHbFWG?p=preview
The only thing I've added is ellipsis and some space to make it look prettier.

[SebSob]

@DarthVanger Thanks, I know it works if you restrict the width, but in my scenario i just have it inside a row/column. See this plunker (updated yours): https://plnkr.co/edit/g3DxMLR6WhcNt0KB6C5I?p=preview

[DarthVanger]

@SebSob the reason is the .input-group, which has display: table.
If you remove that .input-group class, it works
https://plnkr.co/edit/LD7n5ZjocZgh13vNSSES?p=preview

Don't know why input-groups work this way inside of columns, but looks like it's not compatible - they are just overflowing the column width.

Anyways it's not the problem of ui-select: you are just not restiricting the width, so it it has the same width as your .input-group.