How to change height of ui-grid row?

Question

I am using ui-grid. I have a lot of rows and that is why I use scrolling. Everything works perfectly ok until I try to change the height of the rows. Then the scrolling becomes a mess. I have added an example here http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview This is one of the tutorials from the ui-grid website - the only thing I have changed is the CSS. I have added these rules.

.ui-grid-cell-contents {   padding: 1px 1px; }  .ui-grid-render-container-body .ui-grid-header-cell, .ui-grid-render-container-left .ui-grid-header-cell, .grid .ui-grid-row, .grid .ui-grid-cell, .grid .ui-grid-cell .ui-grid-vertical-bar {   height: 22px !important;   font-size: 12px;   line-height: 20px; } .ui-grid-render-container-body .ui-grid-header-cell, .ui-grid-render-container-left .ui-grid-header-cell, ui-grid-header-cell {   height: 55px !important; } .ui-grid-filter-container {   padding: 1px 3px; } 

Scrolling works perfectly ok if the above CSS rules are removed. So I either need to add more CSS rules or I need to use some API of the grid in order to set row height properly. Any help will be much appreciated.

How do I change row height and keep scrolling smooth?

UPDATE: Here is a comparison between a default grid and one with modified CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview try to scroll the rows up and down for each grid. The difference should be pretty obvious.

Answer 1

Take out the:

height: 22px !important; 

from the css and add:

rowHeight:22 

to the gridOptions.

I have the feeling that this is much smoother.

Forked Plunker

Answer 2

scope.gridOptions = { rowHeight: 33 } The best way of changing the row height is from the grid options.