I'm having trouble with the angular-js ui-select bootstrap example:
edit: Unable to directly link to the plunker, so refer to the fifth (Bootstrap) example on this page: http://angular-ui.github.io/ui-select/
Here's what I don't understand. In my code, the label featuring the select value inherits a width: 100% property from the default ui-select classes, causing the padding to be overridden:
.ui-select-bootstrap .ui-select-match-text {
width: 100%;
padding-right: 1em;
}
As a result, the label overlaps the listbox:
https://i.sstatic.net/MNA8C.png
To counteract this effect, I can override the width property by setting it to width: auto;
I attempted adding a class directly to the html element but found that when the class is added in the source HTML, it does not reflect in the resulting HTML.
So how can I effectively apply a class there?
This is a snippet of 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>
Even though I tried adding the class "listboxSelectedLabelOverflowFix" to the ui-select-match element, it doesn't show up in the final HTML output.
The desired effect of this class can be achieved using ng-class (edited in the source code). However, it triggers a conflict within Angular internals leading to 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
It appears that there's already another ng-class present on the html element generated by Angular. The issue arises as ng-class expects a single {} block and cannot be combined with mine.