Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Using the "active" class to identify the currently selected item, not to highlight options on hover #706

Closed
ubirajaralucena opened this issue Feb 28, 2015 · 5 comments

Comments

@ubirajaralucena
Copy link

Currently, ui-select adds an "active" class to the selected option, BUT as soon as we hover over the other options, those options get this "active" class. – IMO the "active" class shouldn't be used for highlighting.
For my needs I added an extra "selected" class to identify the currently selected item, letting the "active" class for highlighting only. Here is a small plunker http://plnkr.co/edit/oRAsSYcYDxuJcOtM09tb where the "fixSelectedItem" directive does the job.

@Akaryatrh
Copy link

Same here, the active class would be more useful for the selected item.
Thx for the workaround @ubirajaralucena 👍

@dimirc
Copy link
Contributor

dimirc commented Mar 18, 2015

Can you setup a PR?

@rzschech
Copy link

+1

@rzschech
Copy link

I added a check mark by comparing the model value to the choice:

<ui-select ng-model="selected">
    <ui-select-match>{{$select.selected.label}}</ui-select-match>
    </ui-select-match>
    <ui-select-choices repeat="choice in choices">
        <span class="fa" ng-class="selected.id === choice.id && 'fa-check'" style="margin-left: -17px"></span>
        <span>{{choice.label}}</span>
    </ui-select-choices>
</ui-select>

@dimirc
Copy link
Contributor

dimirc commented Sep 28, 2015

Please check #1211 and let me know your opinion

@dimirc dimirc closed this as completed Sep 29, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants