CODEWITHSUNDEEP
cssangularjs
Setsuna
Setsuna

Reputation: 2141

Angularjs button ngClass not applied correctly on click

I have a button using bootstrap button classes "btn btn-default btn-primary btn-xs". An "active" class that contains "background:red;" is added only when a scope variable "isactive" evaluates to true using "ngClass" within the template like the following: 

ng-class="{'active': isactive == true}"

I add a click event to the button (ng-click) that once clicked, sets isactive to true.

I notice that when I click the <button>, nothing changes until I click anywhere else on the page, which causes the button to change the color fine.

Oddly, when I click the button and do not click elsewhere, instead when I right click, the button does turn red for a few, but then back to blue. When I inspect the element, it appears the "active" class is applied/added to the set of existing bootstrap classes for buttons. In my CSS, I have the following:

.active {
background:red;
}

.active:active {
background:red;
}

What is the issue? Does this have anything to do with bootstrap button classes?

Upvotes: 0

Views: 825

Answers (1)

runTarm
runTarm

Reputation: 11547

There might be other rules that also set the background and they are also stronger than yours.

Try adding an !important flag like this first:

background: red !important;

If it works you should make your rule somehow to become stronger than others that set the background.

Upvotes: 0

Related Questions