Hello,
I have a Grid which is styled by @CssImport to have a smaller row-height.
My issue:
If I add an ItemDetailsRenderer, the details once shown are hiding the row they belong to (doesn’t seem to matter what kind of Renderer I use, the effect is the same with ComponentRenderer and TemplateRenderer).
If using the default row-height by removing the @CssImport, the details are right below the row where they should be.
I can’t figure out where/what I have to style to get the details in the right spot.
Can someone help?
The CSS I use to set the row-height:
vaadin-grid-cell-content {
padding: 0 0 0 2px !important;
}
[part='cell header-cell']
{
height:25px;
min-height: 25px !important;
border-left: 1px solid var(--_lumo-grid-selected-row-color);
border-right: 1px solid var(--_lumo-grid-selected-row-color);
background-color: #fff;
background-image: -webkit-linear-gradient(top,white 2%,#f4f4f4 98%);
background-image: linear-gradient(to bottom,white 2%,#f4f4f4 98%);
text-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
[part='row']
{
height: 25px;
min-height: 25px;
}
[part='cell body-cell']
{
height:25px;
min-height: 25px !important;
border-left: 1px solid var(--_lumo-grid-selected-row-color);
border-right: 1px solid var(--_lumo-grid-selected-row-color);
}
[part~="resize-handle"]
::before {
width: 15px;
}