Grid row style generator + row height

Hi guys.

I have the following :

grid.setRowStyleGenerator(rowReference -> { final String value = (String) rowReference.getItem().getItemProperty(PROPERTY).getValue(); switch (value.split(System.lineSeparator()).length) { case 2: return "two-row"; } return null; }); where two-row is :

.v-grid-row.two-row { height: $v-grid-row-height * 2 !important; white-space: pre; } and actually debug says that it changed, I see 60px height in the browser, but grid forces the row to be 30px and
shrinks the content to one-row height.

Any ideas how to change the grid row height depend on the content?

Thanks in advance

I know very little about css, but was successful marking rows that the user has edited with special colors using the css below. The difference between this and your css is that I made references both to the non-striped and the striped rows, and made references also to the cells. I don’t know if that is useful in your case, but it worked in mine. “rowrevised” is the string returned by my RowStyleGenerator when a user edit is detected.

.v-grid-row.rowrevised .v-grid-cell {
    background-color: #F0E0FF;
.v-grid-row-stripe.rowrevised .v-grid-cell {
    background-color: #E6D6F5;

Hi Steve!

Thanks a lot for your reply. I will try this and come back with results :slight_smile:

Without success :frowning: Seems grid calculates the row height with the following $v-unit-size + $v-border which is 31px for me
and while rendering it just applies transformation to each row like transform: translate3d(0px, currentYCoordinate + 31px, 0px) which moves each row for 31px (row height) and shrink the content.

I’ll play with this stuff a bit deeper, but would be great if Vaadin guys say if it’s possible at all :slight_smile:
Anyway any ideas are appreciated.


Any ideas? Nobody interests in dynamic grid row height change? I don’t believe :slight_smile:

Many thanks, guys, for your responsiveness. I’ve found the solution, just followed back to the old known Table. One thing I want to say is that the Grid is a really powerful component with many features (editors, row detail, union headers, frozen columns and so on), but without the BASICS like row multilining :frowning:


Best regards, Jenia.


I think it was one of the very first known limitations of the grid, that it will only support fixed height rows. There might be updates coming in the future to allow variable height rows, but no definite plans yet.

Thanks, Jouni for your reply.

Hah, now I need the min width for columns and this possibility of course is absent in the Table, but is present in the Grid, are you kidding? :slight_smile: Grid doesn’t have resize feature for columns but can set min width, and Table has resize but doesn’t have min width. Obviously something is going wrong here… :frowning:

Is it a way to set min width, except lets say css min-width with !important (I’m not sure that this will even work), for Table?

Actually, column resizing is just around the corner for Grid (7.6).

Sounds good, but what about min width in the Table? Is there some workaround for this?