将 "Dialog" 小部件的宽度设置为 Vaadin 14 中页面的百分比

Question

在 Vaadin 14 中，当通过 px (CSS virtual "pixels") 指定宽度和高度时，Dialog 小部件可以正确打开。

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

不幸的是，将 500px 更改为 80%:

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

我希望对话框现在占据浏览器的大部分 windows 宽度。我的看法恰恰相反。导致对话框的宽度大约 仅为 window 的三分之一 而不是 80%。并且宽度是固定的，不会随着用户调整浏览器大小而改变window.

➥ 如何让 Dialog 填充大部分但不是全部浏览器 window，并根据用户 grows/shrinks 和 window 动态调整大小' s width/height?

例子

这是一个完整的示例应用程序，它基于 Vaadin.com 网站提供的 "plain Java Servlet" 入门项目。

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

当运行.

`dialog.setWidth( "500px" )`

`dialog.setWidth( "80%" )`

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?

通过使用 CSS 将 width/height 设置为 vaadin-dialog-overlay 的 overlay 部分。

更长的版本

您看到的行为是样式应用于 flow-component-renderer 内的 div 的结果，而不是人们预期的 overlay 部分。相关门票为：

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

如果您在 DevTools 中检查具有固定宽度的对话框，您会注意到对话框本身实际上更宽。

正确（我的意思是它是正确的，但不是预期的）方法是通过 css 使用来设置对话框的 overlay 部分的样式:

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

和

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

之后，宽度达到了预期的 80%。我希望上面的截图能更好地说明问题：

将 "Dialog" 小部件的宽度设置为 Vaadin 14 中页面的百分比

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

css

dialog

vaadin

vaadin-flow

例子

`dialog.setWidth( "500px" )`

`dialog.setWidth( "80%" )`