CODEWITHSUNDEEP
cssangularjsng-grid
klode
klode

Reputation: 11051

angularjs ng-grid: how to change header style

How can I restyle the header of ng-grid? In particular how can I change the background-color and the text color of the header row?

Upvotes: 6

Views: 10666

Answers (2)

Jeremy
Jeremy

Reputation: 188

I haven't looked into ng-grid before, but looks like a css file is provided for styling? I would advise either changing the actual css file, or over-writing these changes by declaring your own below where the grid.css is declared. Check link if that is what you are talking about.

https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css

For instance, one of the css attributes in the above file is below, just do a ctrl-f and find the attributes you are looking to change.

.ngHeaderCell {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: inherit;
 }

Upvotes: 2

Roberto Linares
Roberto Linares

Reputation: 2225

You can override the background-color property on the .ngHeaderCell class declared in the ng-grid.css to use the background color you want on the header cells.

If you don't want to modify the original ng-grid css, you can create your own css and load it after ng-grid's css in which you can later overide the same .ngHeaderCell class with:

.ngHeaderCell {
    background-color: [your background color] !important;
    bottom: 0;
    color: [your foreground color] !important;
    position: absolute;
    top: 0;
}

Upvotes: 5

Related Questions