Set width of “Dialog” widget to a percentage of the page in Vaadin 14

Question

In Vaadin 14, the Dialog widget opens properly when specifying width and height by px (CSS virtual \"pixels\").

Dialog dialog = new Di         


        

Answer 1

How can I get a Dialog to fill most but not all of the browser window, and be dynamic resized as the user grows/shrinks the window's width/height?

By setting width/height to overlay part of the vaadin-dialog-overlay using CSS.

A longer version

---

The behavior you see is a consequence of style being applied to the div inside a flow-component-renderer, not the overlay part as one would expect. The relevant tickets are:

• setWidth and setHeight either not working, or are wrongly documented
• Add a note that 'setWidth' sets a width to a 'flow-component-renderer', not an overlay/dialog itself

If you inspect the dialog having fixed width in DevTools, you will notice that the dialog itself is actually wider.

The correct (I mean it is correct, but not expected) way would be to style an overlay part of the dialog via css using:

[part="overlay"]{
    width:80%;
}

and

@CssImport(
    value= "./styles/dialogOverlay.css", 
    themeFor = "vaadin-dialog-overlay"
)

After that, the width is taking 80% as expected. I hope the screenshot above illustrates the issue better:

---