0

As suggested in documentation, i have tried below properties first.

this.gridOptions.rowHeight = 25;  
this.gridOptions.headerHeight= 28;

But it ended up like below: grid

We have also tried the material css property changes, but didnt see any reflection to the grid.

$ag-mat-grid-size: 4px;
$ag-mat-icon-size: 12px;

Please give us the suggestion here.

Harsha vardhan
  • 13
  • 5

1 Answers1

2

Try providing those properties at the grid itself.

 <ag-grid-angular 
       [gridOptions]="myGridOptions"
       [rowHeight]="25"          //or [rowHeight]="hightParam"
       [headerHeight]="28"       //or [headerHeight]="headerHeightParam"
  >
 </ag-grid-angular>

I have checked it and it works.

That's why I find kind of strange sometimes. Many of the properties they show under gridOptions under documentation, but they works only when we apply at the grid level itself. Although its performance compensates this behaviour :)

Check this working example plunk link ag-grid material theme example

Paritosh
  • 11,144
  • 5
  • 56
  • 74
  • well it works for me, can you reproduce your issue in https://plnkr.co/edit/ or https://stackblitz.com ? – Paritosh Feb 26 '18 at 08:39
  • @Harshavardhan **[ag-grid material theme example](https://plnkr.co/edit/oxFtPxWOyqAlChUIn1mT?p=preview)** – Paritosh Feb 26 '18 at 08:43
  • @Harshavardhan if you think this helped you, you can upvote it. If you feel it answers your question, you can mark it as answer as well – Paritosh Feb 26 '18 at 08:59
  • In your plunker decrease the row height to 20 then see how the data looks in the grid – Harsha vardhan Feb 26 '18 at 09:34
  • From browser dev-tools, set `.ag-theme-material .ag-cell { line-height: 25px; }` and give it a try. You can change other CSS to make it look more proper – Paritosh Feb 26 '18 at 09:54