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

问题

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

Dialog dialog = new Dialog();
dialog.setCloseOnEsc( true );
dialog.setCloseOnOutsideClick( true );
dialog.add( new Label( "whatever" ) );
dialog.setWidth( "500px" );                // 🡸  width
dialog.setHeight( "700px" );               // 🡸  height

Unfortunately, changing that 500px to 80%:

dialog.setWidth( "80%" );                  // 🡸  width as percentage (%)
dialog.setHeight( "700px" );               // 🡸  height

I expect the dialog to now take up most of the browser's windows widthe. I get just the opposite. Results in the dialog's width being about only a third of the window rather than 80%. And the width is fixed, unchanging as the user resizes the browser window.

➥ 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?

---

Example

Here is an entire working example app based on a "plain Java Servlet" starter project provided by the Vaadin.com site.

package work.basil.example.dialog_by_percent;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        Button buttonPx = new Button( "Dialog by px" ,
                event -> this.dialogByPx()
        );

        Button buttonPercentage = new Button( "Dialog by px" ,
                event -> this.dialogByPercentage()
        );

        add( buttonPx , buttonPercentage );
    }

    private void dialogByPx ( )
    {
        Dialog dialog = new Dialog();
        dialog.setCloseOnEsc( true );
        dialog.setCloseOnOutsideClick( true );
        dialog.add( new Label( "px" ) );
        dialog.setWidth( "500px" );                // 🡸  width
        dialog.setHeight( "700px" );               // 🡸  height
        dialog.open();
    }

    private void dialogByPercentage ( )
    {
        Dialog dialog = new Dialog();
        dialog.setCloseOnEsc( true );
        dialog.setCloseOnOutsideClick( true );
        dialog.add( new Label( "percentage (%)" ) );
        dialog.setWidth( "80%" );                  // 🡸  width
        dialog.setHeight( "700px" );               // 🡸  height
        dialog.open();
    }
}

When run.

dialog.setWidth( "500px" )

dialog.setWidth( "80%" )

回答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:

---

来源：https://stackoverflow.com/questions/59850993/set-width-of-dialog-widget-to-a-percentage-of-the-page-in-vaadin-14