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 ?
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 ?
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>
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?
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);
}
}
Thanks! Using @CssImport
, adding the :host
directive to the css file, and adding the class name to the grid worked for me.
For me, it works with max-height instead of min-height.
Kaspar Scherrer:
First, have you added the class namemy-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…