grid row height problem

I’m try to add image column like in book. but row height not changed.
vaadin version: 7.4.1
protected void init(VaadinRequest request) {
Grid grid = new Grid();
grid.addColumn(“picture”, Resource.class).setRenderer(new ImageRenderer());
grid.addColumn(“name”, String.class);
grid.addColumn(“born”, Integer.class);
grid.addRow( new ThemeResource(“img/Pao-profile-128x128.gif”),“Nicolaus Copernicus”, 1543);
grid.addRow( new ThemeResource(“img/Pao-profile-128x128.gif”),“Galileo Galilei”, 1564);
grid.setCellStyleGenerator(new CellStyleGenerator() {
public String getStyle(CellReference cellReference) {
return “imagecol”;
grid.getColumn(“picture”).setRenderer(new ImageRenderer());
@import “…/valo/valo.scss”;

@mixin testv41 {
@include valo;

.gridwithpics128px .imagecol {
    height: 128px;
    background: black;
    text-align: center;


You can change the row height using CSS, like this

.v-grid-cell {
   height: 50px;

…BUT, grid doesn’t support variable row heights at the moment, which in practice means that every row needs to have exactly the same height. You cannot have one row to be 38px in height and another row 128px in height. Either both are 38px or 128px.

thank you.
will wait for this features.

Why then does the Vaadin Book advise something which is apparently not yet possible?

You also need to define the row heights so that the images fit there. You can set it in the theme for all data cells or for the column containing the images.

For the latter way, first define a CSS style name for grid and the column:

grid.setCellStyleGenerator(cell ->
   "picture".equals(cell.getPropertyId()) ? "imagecol" : null);

Then, define the style in CSS (Sass):

.gridwithpics128px .imagecol {
  height: 128px;
  background: black;
  text-align: center;

I’ve got a choice between the Table and the Grid. I need frozen columns and variable row height. Either component support one feature, none do both. What to do?

Ok, as far as I have experimented, this effect (one row higher than others)
can be achieved
by quite sophistcated logic in setRowStyleGenerator() followed by manipulating (increasing the value of) the CSS
property of subsequent rows (below the elevated one). I may give some example if someone is interested.

I’m really interested in getting these advices :stuck_out_tongue:

Can you provide some example.

You can use setRowStyleGenerator() like this:

grid.setStyleName(“v-lst-event”); //define your own style name
grid.setCellStyleGenerator(new Grid.CellStyleGenerator(){

        public String getStyle(CellReference cellReference) {
            return "v-grid-cell";

[/code]and define the style (scss) like this:

.v-lst-event .v-grid-cell {
     height: 70px !important;

What Ecko proposes, actually sets the non-standard default, but all rows are still of the same height. No setCellStyleGenerator is needed for that, neither any other logic in Grid, except grid.addStyleName() (which is preferred over grid.setSTyleName() to avoid accidental overriding). CSS rule is sufficient.

What I meant was to be able to set
different height for particular rows
(eg. based on data in items).
The solution I used:

Imagine you have in your items special property, telling you what the row height should be. Let’s name it
. Let’s assume, all heights will be multiplication of standard height (eg. if default is 20px, we want to have rows of 20, 40, 60, say - up to 200px height). Then:

setRowStyleGenerator(rowReference -> { int extraHeight = (Integer) rowReference.getItem().getItemProperty("specialHeight").getValue() + 1; int shift = calculateRowShift(container.indexOfId(rowReference.getItemId())); String style = ""; if (extraHeight > 1) style += "v-special-height-row-" + extraHeight + " "; if (shift > 0) style += "v-special-positioned-row-" + shift; return style.equals("") ? null : style.trim(); }); Let’s explain this: int shift = calculateRowShift(container.indexOfId(rowReference.getItemId()));
says what extra height (over standard height) a row gets. In other words, if default row height is 20px and we want to have a row for this particular Item of 60px heright, this property should be set to 2 (which value we’ll use later in CSS, setting actual height to 20px +
x 20px).

The main problem, however, is that even if you set a row to anything heigher than default 20px, the subsequent rows
will not move down automatically
. The Grid bases on absolute positioning. In effect - you’ll get rows overlapped. That’s what the
is for. The implementaion could be like that:

private int calculateRowShift(int index) {
    int sum = 0;
    for (int i = 0; i < index; i++) {
       sum += (Integer) container.getItem(container.getIdByIndex(i)).getItemProperty("specialHeight").getValue();
    return sum;

It’s just iteration over preceeding rows, getting their (eventual) extra height and calculating the overall value this particular row should be lowered. What this method returns is - again - number of extra 20px “pieces” we should lower the row by.

As you can see, those two calculated variables (
) are used to set the style name in the RowStyleGenerator. Some rows will be set for instance something like that:

v-special-height-row-2 v-special-positioned-row-20 This means the row will have the height of 60px and will be located 400px lower than it would, if all rows had the same height. Then CSS rules are needed. Lets assume the default (miimum) height is 20px and the maximum could be 200px (that means
should not exceed the value of

Here we come to the main disadvantage of this workaround.

Let’s say our container brings us 1000 records (1000 rows in the Grid). So, in extreme cases the last row can be moved down by 0 x 20px (no change) or by 9 x 1000 x 20px (all subsequent rows have the maximum height). Thus, we’ll have to prepare nearly 9000 selectors for rows’ proper positioning:

v-special-positioned-row-0 v-special-positioned-row-1 ... v-special-positioned-row-9000 Of course this does not need to be done manually. We’ll compile .scss file, which will include the mixim:

@mixin my-rows { $baseHeight: 20px; @for $i from 2 through 10 { .mygrid .v-grid-row.v-special-height-row-#{$i} .v-grid-cell { height: $baseHeight * $i !important; } } @for $i from 1 through 8991 { .mygrid .v-grid-row.v-special-positioned-row-#{$i} { margin-top: $baseHeight * $i; } } } And finally in our own main mixim:

@include my-rows; Such a huge number of selectors will make generated css files quite heavy, but this was not a big issue in my case. What may cause problems, however, is Internet Explorer 9, which accepts the limited number of selectors in one file. In such a case I’d recommend using a specialized tool (such as
) for splitting the
file into parts.

I have the same problem : to be able to display a Grid object containing rows havind various height… hard trick with the actual Grid.
I adapted your method and used a RowStyleGenerator.
I don’t know why but “margin-top” did not work for me. I had to affect a “transform: translate3d” css attribute computed with the heights of rows above.
It works fine until you want to scroll in the Grid.
The problem is that the css property “transform : translate3d” computed by Vaadin on the .v-grid-body is not adapted to the heights of the rows. I can observe that each mouse wheel scroll make the value decrease from -100 each time. It seems not to be adapted to my rows which height can be 200px or 300px .

I don’t know if my explanation is clear !
So I keep my problem without solution !!!
Need help…


What about just top: XXpx important! ?

Hey, no, it’s not working !!!

The best poit is to put a transform : translate3d on each row as it is made by the Grid on normal rows.
that’s what I made, but after this, the scroll is broken.

i also have the same problem, and one day spent on this problem.

a simple resolution as follows:

in your scss file add

.your_grid_style td
    height: 128px !important; /* define row height */

in your java file add

Grid grid = new Grid();

that’s all

the same
problem, sorry. What you propose is what I wrote in first words of my post two months ago. But this solution, like this one proposed by Ecko, allows only to change default height of
all rows
. The problem discussed is: how to apply dynamically
different heights for different rows

Hi all !

I’ve got a problem with the Grid.
Look at the attachement, i’m using firefox or chrome - when the browser is at full size the last column isn’t right.
When browsers aren’t at full size - not every time - The Grid is correct…

I guess it’s a Css problem, but I need a hint on this one…

Info :

grid = new Grid();
grid.setContainerDataSource((Container.Indexed) model.createContainer()); grid.setSelectionMode(Grid.SelectionMode.NONE);

What do you think ?


I just updated from 7.5.0 to 7.5.4 => seems to work…


I know that this is an old thread and you probably found a solution for your need. I have been looking for a stable, easy (relatively) to understand and use a framework for a long time for Java web app development. A couple of days ago I met with Vaadin so, I am pretty new.

First thing I tried was crating one column (100% width), two rows (1st: 48px height, 2nd: 100% height) grid layout. I couldn’t find a way to achieve this by using a simple function. After a while I achieved this as below:


final GridLayout gridLayoutApplication = new GridLayout(1, 2);



@mixin default {
@include valo;

// Insert your own theme rules here
.my-grid-application {

    .v-gridlayout-slot:nth-child(2) {
        background-color: red;
        height: 48px !important;

    .v-gridlayout-slot:nth-child(3) {
        height: 100% !important;
        top: 48px !important;


[/code]CSS selector,


, helped me.
Rendered output is exactly what I want but I am not sure wheter this is the right way for this approach.

I’am afraid, what you wrote is about GridLayout, which is a Layout (container), in no way related to the Grid (component) this thread is on.

Hi, does anyone know if this issue was adressed yet?
Or does the grid still have this limitation?
Is there a bug or feature we can vote for?

I am not aware that this issue was adressed yet.

It is mentioned in the feature backlog by Jouni Koivuviita: “Variable row height”

I also tried something similar Wojciech Marciniak did by calculating the heights manually and setting offsets to the cells but this completely breaks the scolling as Patricia Dechandol was mentioning.

We also need variable row heights in the grid, but can’t manage to.