Hi.
I have code like this:
<div style="background: white;column-count: 2;column-gap: .5rem;">
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
</div>
Only in first grid elements shows up. In the other two, there is only blank space (attachments: Bez tytułu.png and Przechwytywanie.PNG). When I remove the column-count: 2;column-gap: .5rem; style from outer div, the elements in other two grids shows up (attachment: Przechwytywanie.PNG), but I lose Masonry effect (“tiles” like effect with different heights). The bug only occurs in Chrome.
I did a workaround for this by creating my own css class, and it works good, but I don’t think it’s proper solution for this problem.
<dom-module id="my-grid-styles" theme-for="vaadin-grid">
<template>
<style>
:host(.custom-grid) #items [part~="row"]
{
position: relative !important;
transform: none !important;
}
:host(.custom-grid) #header {
transform: none !important;
}
:host(.custom-grid) {
transform: none !important;
}
</style>
</template>
</dom-module>
Maybe somebody know how to deal with this?
