Set background color of selected row in Angular UI Grid

Question

I have searched everywhere on Stackoverflow and github but haven't been able to find a solution to this problem and I hope someone can show me the right direction.

I'm using Angular UI Grid for my project and so far everything is going good. I'm now trying to modify the CSS of the grid by overriding the default classes with my own to make it look better. The area where I'm currently stuck is changing the background color of the selected rows.

At present, it's the default pale blue color that appears when a row is selected which is out of tune with the rest of the colors in my application. I see in Chrome Inspector tools that the following class is applied to the cell which provides the background color.

.ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{
    background-color: #c9dde1;
}

But when I try to override this class in my own CSS file like below,

.ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{
    background-color: #efe8ed!important;
}

the application still takes the default library class and its color.

There are other grid classes which I have overridden in my own CSS and they are reflected just fine. Can this be a problem because this class is applied dynamically when I select the rows?

Is there a way by which I can have my own CSS class applied?

Thank you for your time and effort.

Adrian Brand · Accepted Answer · 2016-08-04 03:26:29Z

0

In Chrome right click on the cell grid you want to edit the color of and click inspect, look at the styles tab and make sure you are editing the right style. It might be overridden by something. And try not to use important, it is usually a bad idea.

answered Aug 4, 2016 at 3:26

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

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

1 Comment

Yash Kapila Over a year ago

Thank you for your response Adrian. It may appear weird but the same class is now working fine for me. I'm getting the desired color of the selected rows with or without the use of important. I'll keep the usage of important in mind going forward.

Collectives™ on Stack Overflow

Set background color of selected row in Angular UI Grid

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related