How can I vertically align the contents of a cell in a Vaadin Grid?

Question

I have the following code that successfully centers the contents of a cell in my Vaadin grid.

        this.grid.setRowHeight(65);
        this.grid.setStyleGenerator(item -> "v-align-center");

It makes it looks like this.

How can I also vertically center? When I tried adding the style name v-align-middle it did nothing.

Answer 1

I played with CSS styles and default TextRenderer but did not get it working. When you switch to HtmlRenderer then you have more styling options with additional div HTML elements. See this question for styling hints. For example, this should work when you can use flex layouting:

<div style="display:flex; height:100%; width:100%">
    <div style="margin: auto;">11 m³</div>
</div>

Another workaround is to use a ComponentRenderer column with a HorizontalLayout set to 100% height and its child component aligned to middle center.

Answer 2

If you're setting a specific height on the rows then it's pretty straight forward to achieve with CSS.

Rather than using the StyleGenerator, I'd just apply a CSS Class to the Grid itself.

Java:

addStyleName("my-custom-grid");

CSS:

.my-custom-grid .v-grid-body .v-grid-row .v-grid-cell {
    height: 65px;
    line-height: 65px;
}