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 a

Answer 1

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

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