将对话框小部件的宽度设置为Vaadin 14中页面的百分比 [英] Set width of "Dialog" widget to a percentage of the page in Vaadin 14

问题描述

在Vaadin14中，通过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

我预计该对话框现在将占据浏览器的大部分窗口窗口。我得到的正好相反。导致对话框的宽度约为窗口的三分之一，而不是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%" )

推荐答案

如何使对话框填满浏览器窗口的大部分(但不是全部)，并随着用户增大/缩小窗口的宽度/高度动态调整大小？

使用CSS将宽度/高度设置为overlay部分vaadin-dialog-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%。我希望上面的屏幕截图更好地说明了这个问题：

---

这篇关于将对话框小部件的宽度设置为Vaadin 14中页面的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！