如何在 vaadin-flow 中正确指定对话框大小答案

【问题标题】：How to correctly specify dialog size in vaadin-flow如何在 vaadin-flow 中正确指定对话框大小
【发布时间】：2019-04-11 11:53:57
【问题描述】：

试图从包含按钮的网格渲染器中打开一个对话框。问题是对话框不遵守指定的大小。

我尝试设置对话框的宽度和高度，但它不会影响 DOM 元素，只会影响其子元素（看起来不像预期的那样）

    @Override
    public VerticalLayout createComponent(P item) {
                // this simply create a VerticalLayout
        VerticalLayout layout = super.createComponent(item);

        HorizontalLayout subLayout = new HorizontalLayout();
        subLayout.setWidthFull();
        subLayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);

        this.button = new MSButton(this.colorClass, this.vaadinIcon);
        this.button.addClickListener(event -> {
            this.parent = item;
            this.grid.getDataProvider().refreshAll();
            this.dialog.open();
        });

        subLayout.add(this.button);
        layout.add(subLayout);

        return layout;
    }

    private void constructDialog() {
        this.dialog = new Dialog();

        H1 titleHolder = new H1(this.getDialogTitle());
        titleHolder.addClassName("mt-0");
        titleHolder.setWidthFull();

        H3 headerHolder = new H3(this.getDialogHeaderText());
        headerHolder.addClassName("mt-0");
        headerHolder.setWidthFull();

        HorizontalLayout headerRow = new HorizontalLayout();
        headerRow.add(headerHolder);
        headerRow.add(this.getDialogHeaderIcon().create());
        headerRow.setWidthFull();

        MSButton closeButton = new MSButton("Fermer", "success",
                VaadinIcon.CHECK_CIRCLE_O, event -> {
                    dialog.close();
                });

        HorizontalLayout footerRow = new HorizontalLayout();
        footerRow.add(closeButton);

        VerticalLayout footer = new VerticalLayout();
        footer.setDefaultHorizontalComponentAlignment(Alignment.END);
        footer.setAlignItems(Alignment.END);
        footer.setWidthFull();
        footer.add(footerRow);

        VerticalLayout container = new VerticalLayout();
        container.add(titleHolder);
        container.add(headerHolder);
        container.add(this.grid);
        container.add(footer);

        this.dialog.setWidth("700px");
        this.dialog.setHeight("500px");

        this.dialog.add(container);
    }

结果如下：https://ibb.co/HNcgLK2

【问题讨论】：

你试过setMinWidth和setMaxWidth吗？
你的意思是滚动条的问题吗？您添加到对话框中的 Grid 看起来更大，因此会出现滚动条。另外，您对组件获取大小的看法是正确的，似乎<vaadin-dialog-overlay> 的<div> 获取了指定的大小。我的猜测是 design 作为一个复杂的组件 Dialog 工作，但如果它导致错误，请创建一个到 Vaadin dialog flow 的 GitHub 票证。另外，如果您在 DevTools 中检查，您的尺寸是多少？
是的，我尝试了 setMinWidth 和 setMaxWidth 仍然是同样的问题，我已更改为 Lumo 主题，一切正常，但使用 Material 主题，它不会（我之前使用的主题）， vaadin-dialog-overflay 采用正确的大小，内的 div 采用正确的大小，但内的没有！跨度>
你认为这是一个错误吗？或者这是我的错误行为？我的意思是我应该创建一个Vaadin dialog flow 的 GitHub 票吗？
相关说明：Set width of “Dialog” widget to a percentage of the page in Vaadin 14

标签： java dialog modal-dialog vaadin vaadin-flow

【解决方案1】：

通过使用 Lumo 主题而不是 Material one 解决了这个问题。

【讨论】：

【解决方案2】：

最近面临同样的情况。您可以通过使用 @HtmlImport 设置对话框样式来禁用宽度限制：

@HtmlImport("styles/order-edit.html")
class OrderEdit(val orderId: String, okHandler: (Order)->Unit): Dialog() {
...
}

内容如下：

<dom-module id="dialog-fix" theme-for="vaadin-dialog-overlay">
    <template>
        <style>
            [part~="overlay"]{
                max-width: none !important;
            }
        </style>
    </template>
</dom-module>

【讨论】：

在 Vaadin GitHub 网站上查看此问题的票证，列出 on this Answer。