减小 Vaadin 22 流程中的网格大小

Question

Vaadin 22 流。

我在 flexlayout 中使用网格。

我的问题是我需要网格根据其内容增长，直到它填满可用 space 然后它应该获得滚动条。

理想情况下，网格的最小大小应为一行，以使其明显是空的。

本质上我想展示

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

随着网格的填充，它应该会展开，直到“新建”按钮到达页面底部，然后网格应该会显示滚动条。

Spacer 填充浏览器下方的 New Button 并随着 Grid 的增长而缩小。

我试过使用 flex-basis 内容，但网格缩小到什么都没有。

代码如下：

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);
    }

这是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>

这是裁剪区域的样子。新建按钮应该直接在朝鲜下面。

求助！

Answer 1

Vaadin Grid 有两种不同的“高度模式”：

默认固定高度模式，默认约300px，但可以设置为固定或百分比高度，当内容溢出时滚动。
“所有行可见”模式（以前称为 height-by-rows），其中 Grid 的高度直接由其内容决定，并且没有滚动。

（请参阅 https://vaadin.com/docs/v22/ds/components/grid/#dynamic-height 上的文档）

因此，在容器被填满或达到特定的最大高度之前，组件本身不支持增长。

你真正能做的唯一一件事就是以某种方式跟踪网格的 parent 元素的溢出，然后将网格切换到固定高度模式。

或者，根本不使用 Grid 的 built-in 滚动，而是使用 parent 滚动，这当然意味着 Grid 的 header 与 body 一起滚动，而不是保持领先。

减小 Vaadin 22 流程中的网格大小

Reduce size of Grid in Vaadin 22 flow

html

flexbox

vaadin

vaadin-grid

vaadin22