0

Vaadin 22 流。

我在 flexlayout 中使用网格。

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

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

本质上我想显示

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>

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

帮助！

HTML

4

1 回答 1

0

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

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

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

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

你唯一能做的就是以某种方式跟踪 Grid 的父元素的溢出，然后将 Grid 切换到固定高度模式。

或者，根本不使用 Grid 的内置滚动，而是滚动父级，这当然意味着 Grid 的标题与正文一起滚动，而不是停留在顶部。

于 2022-02-28T16:22:57.307 回答