I have a Spring Boot Vaddin application with a Grid displaying photos that are 486x712 px. The Grid autowidth works perfect, so I need to change the cell height with CSS.
I can do that globally for my application in my theme like this.
mytheme.scss
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
.v-grid .v-grid-body .v-grid-row .v-grid-cell{
height: 490px;
background-color: aqua;
}
}
Works great, my Grid renders with the background color and the Grid rows are the correct height to display my images. Now the bad part, this change is global, all my grids in the application are displaying data in 490px height rows. Not Good.
My nest step was trying to apply the changes to only my images grid with this change.
grid.setCellStyleGenerator(cellRef -> "photogrid" );
And this change to mytheme.scss
@import "../valo/valo.scss";
@mixin mytheme {
@include valo; .
v-grid .v-grid-body .v-grid-cell.photogrid {
height: 490px;
background-color: aqua;
}
}
This gives me Aqua background in my Photos grid but doesn’t change the height of any of the cells. All the other grids render normally as expected. Not sure why this is happening, only the backgrouund changing but not the height.
Any ideas? I’ve tried lots of variations of grid.setRowStyleGenerator(rowRef → “photogrid” ); and
grid.setCellStyleGenerator(cellRef → “photogrid” ); As well as
Another one I’ve tried that doesn’t apply any styling to the grid:
grid.setRowStyleGenerator(rowRef -> "photogrid" );
myyheme.scss
.v-grid-row.photogrid > .v-grid-cell {
height: 490px;
background-color: aqua;
}
Any help would be greatly appreciated.
-Matt