Vaadin 对话框以编程方式调整大小答案

【问题标题】：Vaadin Dialog resize programmaticallyVaadin 对话框以编程方式调整大小
【发布时间】：2020-03-16 21:28:49
【问题描述】：

Vaadin 14.2.0.alpha7 向 Dialog 组件 (https://vaadin.com/api/platform/14.2.0.alpha7/com/vaadin/flow/component/dialog/Dialog.html) 添加了新功能，尤其是调整大小的可用性。不幸的是，我无法找到一种方法来创建具有宽度的对话框，我既不需要在打开对话框后以编程方式设置宽度。

以下是我用于描述目的的几行代码（未成功）：

    dialog.isResizable = true

    dialog.width = "900px"


    dialog.addOpenedChangeListener { event ->

        println("!!!opened-changed event fired")

        dialog.width = "900px"

        println("!!!dialog width = ${dialog.width}")
    }

    dialog.addResizeListener { event ->

        println("!!! on resize event width = ${dialog.width}")
    }

当我打开对话框时，它以有限的宽度（大约 500 像素）显示，OpenedChanged 事件被触发并打印该对话框的宽度为 900 像素（而它不是！），当我手动调整它的大小时，触发并打印 Resize 事件该对话框的宽度约为 600 像素（在我使用鼠标手动增加了一点之后）。

我知道早期版本的 Dialog 在模板中的宽度有限（大约 500 像素），并且可以通过导入样式来调整对话框宽度的解决方法。我希望新版本能够在不触及模板和客户端的情况下增加对话框宽度。

有没有什么方法可以设置对话框宽度并在不触及客户端模板的情况下以编程方式打开？

附： 14.2.0 版本宣布将于 4 月发布，所以我相信这个问题即使现在它的预发布版本也是合适的。

【问题讨论】：

您好，我在从 vaadin.com/start/ 获取的新项目中尝试了相同的方法，并将 Vaadin 版本更改为您使用的 14.2.0.alpha7。当我打开对话框时，我可以按预期看到具有900px 宽度的叠加层。此外，将宽度设置为 openedChangedListener 有效。您能否尝试在一个新项目中运行它来确认该问题？
您好，@DiegoCardoso，感谢您的反馈。我通过删除与主题无关的所有内容（带有新文件夹、pom.xml 等的新项目）创建了一个新项目并将其上传到 git - github.com/itslarin/vaadin_14.2.0.alpha7。我有完全相同的情况 - 对话框是用默认大小创建的，而打印它的宽度是 900px，当我手动调整它的大小时，它打印它有 594px（在我扩大了它的宽度之后）。为避免可能的误解 - 我使用分辨率为 1920*1200 的显示器。也许你得到了不同屏幕分辨率的 900px cos？

标签： vaadin

【解决方案1】：

这是由于 ~560px 的 max-width 设置符合材料设计。这里有一张关于它的票：Dialog Size - Material Theme。（在默认的 Lumo 主题中，这是开箱即用的。您可以通过在 MainLayout.kt 中注释掉 @Theme(value = Material::class, variant = Material.LIGHT) 来验证它）

不幸的是，由于样式以overlay 部分为目标，解决此问题的唯一方法是使用样式文件。另一方面，在当前版本中它应该非常简单:)

我向您的存储库创建了一个拉取请求，其中包含所需的更改。随意使用它，如果你想要Make width acccept values more than 500px :)

【讨论】：

感谢您的帮助，它有效！我的错是我没有深入研究前端，假设只要供应商使对话框可调整大小，就应该有严格的服务器端解决方案。只要它是一个主题限制，现在我相信没有任何编程方法可以在不触及模板的情况下克服我的问题，我会将您的答案标记为解决方案，并且会跳过我的 github 示例，而不会与您的 pr 公开，以防其他人将面临同样的情况。