0

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.

Yash Kapila
  • 261
  • 7
  • 17

1 Answers1

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.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • 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. – Yash Kapila Aug 04 '16 at 03:38