Search code examples
htmlflexboxvaadinvaadin-gridvaadin22

Reduce size of Grid in Vaadin 22 flow

Vaadin 22 Flow.

I'm using a Grid in a flexlayout.

My problem is that I need the grid to grow based on its content until it fills available space and then it should acquire scroll bars.

Ideally the grid should have a min size of one row to make it obvious that it is empty.

Essentially I want to display

FlexLayout
  Grid - grows as content grows until page fills then shows scroll bars
  New button
  Spacer - flex grow 1

As the grid fills it should expand until the New button hits the bottom of the page and then the Grid should show scroll bars.

The Spacer fills the browser below the New Button and shrinks as the Grid grows.

I've tried using flex-basis content but the grid shrinks to nothing.

Here is the code:

private void initLayout()
    {
        setFlexDirection(FlexDirection.COLUMN);
        setJustifyContentMode(JustifyContentMode.START);
        setAlignItems(Alignment.START);
        setId("searchLayout");
        var entityGrid = new Grid<E>();
        add(entityGrid);
        final var newButton = new Button("New");
        newButton.setWidth("100%");
        add(newButton);
        var spacer = new Spacer("100%");
        add(spacer);
        setFlexGrow(1, spacer);
    }

Here is the html:

<div id="searchLayout" style="flex-direction: column; display: flex; width: 100%; justify-content: flex-start; align-items: flex-start; height: 100%; flex-grow: 1;">
<vaadin-grid suppress-template-warning="" style="touch-action: none;">
<vaadin-grid-column suppress-template-warning="">

<template class="header">Country</template></vaadin-grid-column>

<vaadin-grid-cell-content slot="vaadin-grid-cell-content-0">Country</vaadin-grid-cell-content>

<vaadin-grid-cell-content slot="vaadin-grid-cell-content-1"></vaadin-grid-cell-content><vaadin-grid-cell-content slot="vaadin-grid-cell-content-2"></vaadin-grid-cell-content><vaadin-grid-cell-content slot="vaadin-grid-cell-content-3">Australia</vaadin-grid-cell-content>
<vaadin-grid-cell-content slot="vaadin-grid-cell-content-4">Japan</vaadin-grid-cell-content>

</vaadin-grid>
<vaadin-button theme="primary" style="width: 100%;" tabindex="0" role="button">New
</vaadin-button>
<span id="Spacer" style="width: 100%; flex-grow: 1;"> </span></div>

Here is what the cropped area looks like. The New button should but directly under North Korea.

Help!

HTML

Solution

  • Vaadin Grid has two distinct "height modes":

    1. The default fixed height mode, defaults to approx 300px but can be set to a fixed or percentage height, and scrolls when contents overflow.
    2. "All rows visible" mode (formerly known as height-by-rows), where the Grid's height is directly determined by its contents, and there is no scrolling.

    (See documentation for this at https://vaadin.com/docs/v22/ds/components/grid/#dynamic-height)

    Thus, there is no support per se in the component for growing until the container is filled, or until a specific max height is reached.

    The only thing you really can do is to somehow track the overflow of the Grid's parent element, and at that point switch the Grid to fixed height mode.

    Or, simply not use the Grid's built-in scrolling and scroll the parent instead, which of course means that the Grid's header scrolls with the body instead of staying put on top.