I don't get this in the angular-js ui-select bootstrap example:
edit: can't link to the plunker directly, so use the fifth (Bootstrap) example on this page: http://angular-ui.github.io/ui-select/
But in my code the label with the select value gets a width: 100%; property from default ui-select classes, the padding is overwritten:
.ui-select-bootstrap .ui-select-match-text {
width: 100%;
padding-right: 1em;
}
This causes the label to flow over the listbox:

I can cancel this effect by overriding the width property with width: auto;
I can apply a class by editing the html of the element directly. But when the class is added to the source HTML, it cannot be found in the resulting HTML.
So how can I apply a class there?
This is my source code:
<label class="control-label">Bronhouder</label>
<ui-select ng-model="params.bronhouder" theme="bootstrap" on-select="selectBronhouder()">
<ui-select-match ng-class="{'listboxSelectedLabelOverflowFix': true}">{{params.bronhouder.naam}}</ui-select-match>
<ui-select-choices repeat="item in bronhouders | filter: $select.search">
<span ng-bind-html="item.naam | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
I tried adding the class listboxSelectedLabelOverflowFix, on the ui-select-match element but it doesn't appear on the final HTML element.
The effect of this class can be achieved through using ng-class (edited the source code). However it causes a conflict in the Angular internals with the following error:
4angular.js:14328 Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 35 of the expression [{"selectedLabelOverflowFix":true} {'btn-default-focus':$select.focus}] starting at [{'btn-default-focus':$select.focus}]. http://errors.angularjs.org/1.6.1/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=35&p3=%7BelectedLabelOverflowFix%22%3Atrue%7D%20%7B'btn-default-focus'%3A%select.focus%7D&p4=%7B'btn-default-focus'%3A%select.focus%7D
So it looks like there's already another ng-class on the html element that's being produced by Angular. ng-class expects a single {} block and can't be combined with mine.