How to correctly specify dialog size in vaadin-flow

问题

Trying to open a dialog from a grid renderer which contain a button. The problem is that the dialog isn't respecting the specified size.

I've tried setting the width and height of the dialog but it doesn't affect the DOM element only its childs (which doesn't look as expected)

    @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);
    }

Here's the result: https://ibb.co/HNcgLK2

回答1:

Fixed the problem by using Lumo theme instead of Material one.

回答2:

Faced same case recently. You can disable width limit by styling your dialog using @HtmlImport :

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

with following content:

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

来源：https://stackoverflow.com/questions/55631881/how-to-correctly-specify-dialog-size-in-vaadin-flow