展开 VerticalLayout 宽度以匹配 Grid 宽度答案

【问题标题】：Expand VerticalLayout width to match Grid width展开 VerticalLayout 宽度以匹配 Grid 宽度
【发布时间】：2021-09-27 14:09:07
【问题描述】：

我正在写一个 Vaadin SearchDialog，其中包含：

搜索文本字段
包含搜索结果的网格
两个用于确认或取消的操作按钮

基本上这是我的布局结构：

我的问题是我尝试将网格的宽度扩展到最大尺寸。我使用了 Grid::setWidthFull 和这段代码

resultGrid.getColumns().forEach(column -> column.setAutoWidth(true));

不过好像mainLayout的宽度还是设置为“ButtonLayout”：

My dialog print screen

我的技术背景是：

Vaadin 流 14.7（全 Java）
Java 16
春季启动

【问题讨论】：

标签： vaadin vaadin-flow

【解决方案1】：

VaadinDialog 应用了预定义的填充。要删除它（让对话框占据全部空间，请将下面的 CSS 添加到您的 shared-styles.js 文件中：

<dom-module id="my-dialog-styles" theme-for="vaadin-dialog-overlay">
 <template>
   <style>
     [part="content"] {
        padding: 0;
     }
   </style>
 </template>
</dom-module>

或者添加这个以便你的shared-styles.css 文件使其全屏显示

    vaadin-dialog-overlay {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    vaadin-dialog-overlay::part(overlay) {
        width: 100%;
        height: 100%;
        padding: 0;
    }
    
    vaadin-dialog-overlay::part(content) {
        padding: 0;
    }

【讨论】：

您好，感谢您的回答。我的问题与对话框本身无关。当我将一个复杂的表单设置为一个对话框时，对话框的大小会适应它的内容。但是网格没有。当我在对话框中设置网格时，它的宽度不会改变。
从您的屏幕截图中，网格正在占用可用空间。还是您裁剪了图像？
另外，SearchField 的宽度是多少？ Grid::setWidthFull 将宽度设置为相对于父级宽度的 100%。
我自己从来没有设置过大小，所以我认为SearchField的大小是texteArea默认大小。所以我的猜测是网格大小不会自动适应它的内容。这就是为什么我有一个滚动条。
如果您无法修复它，您可以展示如何复制该问题，以便我更好地理解它。

【解决方案2】：

Grid::setWidthFull -- 这意味着您将 Grid 的宽度设置为 100%，这反过来意味着 Grid 将使用与父布局可用的空间一样多或尽可能少的空间，而不管其自身的内容如何。

如果要扩展网格以容纳所有内容，则不需要对其进行任何宽度设置。我不记得 Vaadin 14 的默认值是什么，但 setWidth(null); 应该删除任何以前设置的宽度。

要同时清除两个方向的大小设置，还有setSizeUndefined()，但这可能不是您的网格的最佳选择（除非您的行数很少）。

【讨论】：