Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Grid - How to display multiple lines in one cell

Kilian Gärtner
6 years ago May 19, 2015 10:22pm
Joacim Päivärinne
6 years ago May 20, 2015 1:30pm
Nicholas Robinson
6 years ago May 27, 2015 2:21pm

You can do it but it is tricky and might be a bit buggy. I have a cell where I have mutliple lines inside. The renderer creates a list that looks like this:

<ul style="list-style-type:none">

Then I have a CellStyleGenerator.
The CellStyleGenerator sets a style for every cell in the entire row based on the number of entries in the list.

In the theme I generate the styles with the help of a for loop in scss

.fixed-row-height .v-grid-row {
  position: initial; transform: none !important;

@for $i from 2 through 10 {
   .fixed-row-height .cell-height-#{$i}  {
     height: $v-table-row-height * $i !important;

The ul and li tags also need a bit of formating that the margins are correct. 
In my case it works quite well, but I am not sure how this would work with a lot of items inside or a lot of rows in the grid.

Kim Leppänen
6 years ago May 28, 2015 10:05am
David Kennedy
6 years ago May 28, 2015 1:03pm
Jet Beray
6 years ago Jun 04, 2015 11:55am
Patricia Dechandol
6 years ago Aug 20, 2015 2:17pm
Raimund Barbeln
6 years ago Nov 05, 2015 9:13am

I need dynamic row heights too, because of very long Strings in one of my columns, This should be made possible in the Grid.

Valery Tamashevich
5 years ago Feb 13, 2017 7:18pm

A bit late to the party.
+1 for dynamic Row Height