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

Question

在 Vaadin 14 中，当通过 px 指定宽度和高度时，Dialog 小部件会正确打开 ( 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

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

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

我预计该对话框现在会占据浏览器窗口的大部分宽度。我的看法恰恰相反。结果对话框的宽度大约仅占窗口的三分之一，而不是 80%。并且宽度是固定的，不会随着用户调整浏览器窗口的大小而改变。

➥ 如何让 Dialog 填充大部分但不是全部浏览器窗口，并随着用户增大/缩小窗口的宽度/高度而动态调整大小？

---

示例

这里是一个完整的工作示例应用程序，基于 Vaadin.com 网站提供的“普通 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 将宽度/高度设置为 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%。我希望上面的屏幕截图能更好地说明问题:

---