fix(bootstrap layout): Restrict selected length to ui-select-container

[burka]

In bootstrap theme, if you have a ui-select with a given width and a long selected option it can overflow its box.

Reproduced with most recent versions at https://plnkr.co/edit/eHUcO3gdTY86owCOXL18?p=preview .
angularjs 1.5.7, bootstrap 3.3.6, ui-select 0.18.0

[user378230]

Can you confirm this works with the clear button? Had to revert a number of bootstrap CSS issues because it broke styling with clear button (eg. #1337)

[burka]

It doesn't make it any worse from my point of view. The clear button stays below the select ... 👎

[user378230]

The clear button should be displayed next to the ui-select (like input-group-addon in bootstrap) at least it does for me...

[burka]

As far as I can see it it is wrong as soon as you restrict the width of the ui-select and have a long text, see https://www.browserstack.com/screenshots/28d5ffe5e0e3742265f046f27d3575f85acc4795 for lots of screenshots of it.

[burka]

👎 Before the fix it worked on short texts, after it doesn't.

[user378230]

It needs to work with short and long texts... 😕

[burka]

I added a absolute positioning to the remove link taken from the caret besides it. That works for both short and long texts. Is a.btn below .ui-select-toggle sufficient?

.ui-select-bootstrap .ui-select-toggle > a.btn {
  position: absolute;
  height: 10px;
  right: 10px;
  margin-top: -2px;
}

See the updated plnker: https://plnkr.co/edit/eHUcO3gdTY86owCOXL18?p=preview

[burka]

This fixes #1576 by keeping the remove link at its position. You could add some magic to shorten the text further to not hide below the button, but it improves the situation a lot.

[burka]

Any news on this? It's just a small change and I addressed all raised concerns.

[aaronroberson]

@burka accepting as an improvement over the existing functionality, thanks!