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.

score 48 · Accepted Answer · answered Dec 01 '14 at 13:23

48

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

answered Dec 01 '14 at 13:23

mainguy

8,283
2
31
40

I don't like this solution. When the grid height matches that of the screen, changing the CSS here messes with the scolling behavior. It can't calculate the row height properly, because, I suspect, it uses the rowHeight value in code rather than measuring the offsetHeight() – FlavorScape Feb 09 '16 at 20:56

score 22 · Answer 2 · answered Jan 14 '15 at 13:27

22

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

answered Jan 14 '15 at 13:27

Romcode

221
1
6

1

Why is this the best way? i find css much easier. – Mustafa Jul 07 '16 at 18:21
5

Because ui-grid needs row height in javascript for calculation. By changing it with CSS you mess up row display – Fen1kz Dec 14 '16 at 19:06

score 8 · Answer 3 · answered Mar 02 '16 at 05:03

8

Try add this to your css:

.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}

answered Mar 02 '16 at 05:03

Amir978

857
3
15
38

is there a performance impact due to any affect on virtualization? – ss ulrey Aug 08 '16 at 22:00
No, I use it at work and it works fine with no delay or any impact – Amir978 Aug 10 '16 at 08:18
I found "padding-top: 5px;" also useful in addition to the auto height; – Rob Sedgwick Dec 01 '16 at 15:43

score 0 · Answer 4 · answered Sep 07 '16 at 07:23

0

Just alter grid class accordingly.

.grid{
    height: 70vh;
}

answered Sep 07 '16 at 07:23

Rohan Jetha

82
6

How to change height of ui-grid row?

4 Answers4

Linked

Related