Style Grid border in case Grid height is calculated

76 views Asked by At

I have a case which want to get vaadin-grid the maximum height possible in screen. So, this is easy. the problem is that despite the vaadin-grid size is ok, the tbody might be shorter than vaadin-grid. So, whenever there is not enough rows we get empty space. it would be ok in case had no border. But, because we do use border on the grid, empty space comes up. Sure can shift the border to thead and tbody and get it looks good, but than the opposite happen cause bottom border will get lost when tbody in longer than vaadin-grid. Is there a clean way, non dirty js, to distinguish cases? something else? Thanks

1

There are 1 answers

0
Jouni On

I think you should be able to get at least very close by using the :host([overflow~="bottom"]) state attribute selector. Add/remove the borders based on that. The overflow attribute value changes based on if rows are overflowing the from the bottom of the grid viewport.

The only issue I see is that the border will disappear when the user scrolls to the bottom of the grid.