Use of <span>s inside <ui-select-match> causes undesirable formatting.

[bobisch]

Bug description:

Recent changes seem to have rendered all <spans> inside a <ui-match> at 100% causing the first such span to push everything way to the right (out of the container). See plunker below. There do not seem to be any quick and easy work-around. Seems to have been caused by PR #1680 in response to #1576 . See also note added to 01055c5

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/yrOYc0w54E60zSk0w7HE?p=preview

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: 1.5.x

UI-Select: 0.19.3

Bootstrap/Select2/Selectize CSS (if applicable): 3.3.6

[starf]

I take it this hasn't been fixed yet?

[Jefiozie]

@starf no it is not, maybe you could have a look? Happy to review your PR.

[starf]

@Jefiozie Thanks for the response but i'm afraid i'm not knowlegeable enough to touch that code. Have a good day.

[boillodmanuel]

Any news for this issue?

This prevents us from upgrading and currently each version has a bug that impacted us:

• ui-select-no-choice isn't displayed #1609 that prevents us to use 1.17.1 (seems fixed in 1.19.8)
• Bug fix - Search input isn't blocked  #1822 and Reverting #1822 #1832 that prevents us to use 1.19.4 -> 1.19.? (seems fixed in 1.19.8)
• this one (Use of <span>s inside <ui-select-match> causes undesirable formatting. #1826) that prevents us to use 1.19.3 -> not fixed

[DarthVanger]

Here is a simple fix: https://plnkr.co/edit/DsX70S8VloDAC8bSgY88?p=preview
Though not sure how safe is it for other use cases.

Here is a safer approach, using additional inner container, to avoid touching the .ui-select-match-text style: https://plnkr.co/edit/Fw3pDvpuu7C4VF7xvMsH?p=preview