How to correctly specify dialog size in vaadin-flow

Question

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

Do you mean that the problem is scrollbars? It looks like the `Grid` you are adding to the dialog is bigger, thus scrollbars occur. Also, you are right about component getting sizes, it seems that the `
` of `` gets the size specified. My guess would be that it works by `design` as `Dialog` a complicated component, but create a GitHub ticket to [Vaadin dialog flow](https://github.com/vaadin/vaadin-dialog-flow) if it causes errors. Also, what sizes do you have if you inspect in DevTools? — anasmi, Apr 11 '19 at 13:27
Yes i tried the setMinWidth and setMaxWidth and still same problem, i've changed to Lumo theme and everything works fine, but with the Material theme it doesn't (the theme that i used before) , the vaadin-dialog-overflay takes the right size, the div inside takes the right size, but the inside the doesn't ! — Sidi Mohamed MOULEY SLIMANE, Apr 12 '19 at 10:23
Do you think it's a bug ? or it's a mis behavior of mine ? i mean should i create a GitHub ticket to [Vaadin dialog flow](https://github.com/vaadin/vaadin-dialog-flow)? — Sidi Mohamed MOULEY SLIMANE, Apr 12 '19 at 10:29
On a related note: [*Set width of “Dialog” widget to a percentage of the page in Vaadin 14*](https://stackoverflow.com/q/59850993/642706) — Basil Bourque, Jan 22 '20 at 22:29

score 1 · Answer 1 · answered Jul 28 '19 at 13:04

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>

See tickets for this issue on the Vaadin GitHub site, listed [on this Answer](https://stackoverflow.com/a/59854123/642706). — Basil Bourque, Jan 22 '20 at 22:31

score 0 · Accepted Answer · answered May 03 '19 at 14:41

0

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

answered May 03 '19 at 14:41

Sidi Mohamed MOULEY SLIMANE

57
9

How to correctly specify dialog size in vaadin-flow

2 Answers2

Linked