减小 Vaadin 22 流程中的网格大小
Reduce size of Grid in Vaadin 22 flow
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>
这是裁剪区域的样子。新建按钮应该直接在朝鲜下面。
求助!
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 流。
我在 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>
这是裁剪区域的样子。新建按钮应该直接在朝鲜下面。
求助!
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 一起滚动,而不是保持领先。