1

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:
enter image description here

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.

2
  • Your plunker link isn't working. Commented Nov 12, 2017 at 22:25
  • @pegida thanks, I don't know how to link Plunker examples directly. Commented Nov 13, 2017 at 7:03

1 Answer 1

0

I've solved this by adapting the class that ui-select uses on the text element.

.ui-select-match-text {
    width: auto !important;
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.