Angularjs button ngClass not applied correctly on click

Question

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?

Yes, I had that first.. oddly enough the same behavior occurred, so I added the == true just to see if it would make a difference, which it didnt. — Setsuna
– Setsuna, Commented Jul 30, 2014 at 3:51
Would you be able to post some code that replicates your issue? For starters: jsfiddle.net/FMUPz — user1234
– user1234, Commented Jul 30, 2014 at 4:00
There might be other stronger rules that also set the background. Try adding !important like this background: red !important; first. If it works you have to make your rule to become the strongest. — runTarm
– runTarm, Commented Jul 30, 2014 at 5:26
@runTarm THANK YOU. Post your comment as an answer? I don't know what bootstrap css is causing this behavior, but it worked. — Setsuna
– Setsuna, Commented Jul 30, 2014 at 12:25

runTarm · Accepted Answer · 2014-07-30 12:56:04Z

0

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.

answered Jul 30, 2014 at 12:56

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs button ngClass not applied correctly on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related