Grid Custom Row Height

Flow
1

In my web Application i want to set custom grid row height. Vaadin has default row height but i want to custom height for every row and column.

How can i do that?Any expert here ?

2

If you are working on Vaadin 10+, there is no Java API for this, but you can define the row height with css.

It could look something like this in your shared styles

<dom-module id="my-grid" theme-for="vaadin-grid">
  <template>
    <style>
      :host(.my-grid) [part="row"]
 {
        min-height: 80px;
      }
    </style>
  </template>
</dom-module>
3

In Vaadin 14, I put the suggested code in my shared styles and gave my Grid the indicated id (i.e. my-grid) but it didn’t change anything.

If I use web browser tooling and update the CSS on the fly for a Grid’s tr tag and set the min-height, then the row height changes. Then there is the problem of all subsequent tr tags need to get their transform adjusted (i.e. translateY) and that’s probably as far as I should dig into the framework.

Can you confirm this code above still works in Vaadin 14 or is there a better way to do this?

4

First, have you added the class name my-grid to the grid? without it, the CSS that Tatu wrote does not work.

In Vaadin 14 this should still work. Although it would be better to use the new @CssImport annotation. Here is how this will be done with CssImport:

// myGridStyles.css
:host(.my-grid) [part="row"]
 {
	min-height: 80px;
}

// View
@CssImport(value = "./styles/myGridStyles.css", theme-for = "vaadin-grid")
@Route("mygrid")
public class MyGridView extends VerticalLayout {
	public MyGridView (FooRepository fooRepository){
		Grid<Foo> myGrid = new Grid<>(Foo.class);
		myGrid.addClassName("my-grid");
		myGrid.setItems(fooRepository.findAll());
		add(myGrid);
	}
}
5

Thanks! Using @CssImport, adding the :host directive to the css file, and adding the class name to the grid worked for me.

6

For me, it works with max-height instead of min-height.

7

Kaspar Scherrer:
First, have you added the class name my-grid to the grid? without it, the CSS that Tatu wrote does not work.

In Vaadin 14 this should still work. Although it would be better to use the new @CssImport annotation. Here is how this will be done with CssImport:

// myGridStyles.css
:host(.my-grid) [part="row"]

{

min-height: 80px;
}

// View
@CssImport(value = “./styles/myGridStyles.css”, theme-for = “vaadin-grid”)
@Route(“mygrid”)
public class MyGridView extends VerticalLayout {
public MyGridView (FooRepository fooRepository){
Grid myGrid = new Grid<>(Foo.class);
myGrid.addClassName(“my-grid”);
myGrid.setItems(fooRepository.findAll());
add(myGrid);
}
}

That worked great thank you! You may have to add myGrid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT) for long text to properly wrap and not just overflow (works with the ComponentRenderer as well) but with that addition it works like a charm…