vaadin - 展开 VerticalLayout 宽度以匹配 Grid 宽度

Question

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

• 搜索 TextField
• 包含搜索结果的网格
• 两个操作按钮确认或取消

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

对话框
|- MainLayout (VerticalLayout)
| - - 搜索字段（文本字段）
| - - 结果网格（网格）
| - - 按钮布局（水平布局）
| - - - 取消按钮
| - - - 确认按钮

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

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

但似乎 mainLayout 宽度仍设置为 "ButtonLayout" ：

我的对话打印屏幕

我的技术背景是：

• Vaadin flow 14.7（全java）
• 爪哇 16
• 弹簧靴

标签： vaadinvaadin-flow

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