I want to change the color and text of the angular ui-grid header.
I want the background of the header to be black and the text to be white.
I don't want gradient or shading. I just want it black.
What CSS do I need to add?
I know this is already answered. But this css rule does the same job without the need of creating columDefs:
.ui-grid-top-panel {
background: black;
color: white;
}
Plunker
This is pretty simple. Just add a headerCellClass for each column with your css.
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellClass: 'white' },
{ field: 'company',headerCellClass:'white'}
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
})
}
};
here's a sample
http://plnkr.co/edit/DKi9nSMbI3PG1u8lcHDE?p=preview
If you need to change the background color of all ui-grid header
use the following in your CSS file.
.ui-grid-header-canvas{
background-color: black;
}
.ui-grid-top-panel{
color: white;
}
Otherwise, if you need to change the background color of specific ui-grid headers
, then use headerCellClass
attribute.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With