Grid: How to set header row height?

Marcel Hallmann

Hi,

what is the recommended way to set the height of the header row?
I could adjust it by:

.v-grid-header tr.filterHeaderRow > th {
    height: 50px !important;
  }

this.filterRow = this.grid.appendHeaderRow();
filterRow.setStyleName("filterHeaderRow");

but then the header row overlaps the table's body.

So, how to set it correctly?

Steve Demy

The top grid body margin needs to be 26px plus or minus changes you've made to the header row height. In the example below I have a second header row of 30px for filters so the total top margin required is 26 (standard header) + 30 (my second header) = 56.

.v-grid.lowerbody .v-grid-body {
    margin-top: 56px !important;
}

HeaderExample.png (37.7 kB)

Marcel Hallmann

Thank you, that worked for me

Important Notice - Forums is archived

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

Grid: How to set header row height?

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