由于 CSS 延迟渲染，GWT/GWTP PopupDialog 并不总是居中

Posted 2023-03-05

【中文标题】由于 CSS 延迟渲染，GWT/GWTP PopupDialog 并不总是居中

【英文标题】：GWT/GWTP PopupDialog not always centered due to CSS delayed rendering

【发布时间】：2012-10-11 17:05:13

【问题描述】：

我正在使用 GWT 2.4、GWTP 和 Chrome 22.0.1229.94 进行测试。我已经为这个问题苦苦挣扎了好几天。

在启动时，我使用扩展了 PopupViewImpl 的视图呈现自定义 PopupDialog。在重写的 onReveal() 方法中，我将对话框居中。 GWTP 代码中心同步并使用 scheduleDeferred。

在开发模式下并在本地服务器上运行时一切正常：弹出对话框始终正确呈现并居中。我也在IE中测试过。

但是，当部署到 Internet 上的实时 Web 服务器时，我注意到当我使用 F5 刷新时，有时在脚本尝试使对话框居中之前未应用 CSS。这会导致测量错误，并且对话框未放置在中心。有趣的是，这似乎只是偶尔发生，通常是当浏览器在调用预定的延迟命令之前渲染所有 (CSS) 资源的速度不够快时。

所以，我已经尝试了以下方法：

使用不同的技术加载 CSS（在 html 文件中引用，在 GWT 模块中引用，放入 CssResouce） 使用 Scheduler.get().scheduleDeferred 作为默认代码的中心也可以。 在 onReveal 中调用 RootLayoutPanel.get().onResize() 以尝试在居中延迟之前触发一些布局。

我注意到 Chrome 和 IE 中的行为相同，因此这可能不是浏览器问题。我的问题是在哪里放置我的“中心”调用，以确保在正确应用所有 CSS 之后调用它，或者我可以做些什么来强制 CSS 呈现？

谢谢！

这是Presenter中扩展PresenterWidget的onReveal代码：

@Override
protected void onReveal() 
    super.onReveal();

    // Hide loading image
    fireEvent(new HideApplicationLoadingImageEvent());

    // Reset message
    getView().setStatusMessage(null);

    // Center the popup
    getView().center();

【问题讨论】：

你能发布你的 onReveal() 代码，它适用于使对话框居中吗？

在上面的帖子中添加了 onReveal 代码。

【参考方案1】：

有方法 addToPopupSlot(child, boolean center);如果您为 center 参数发送 true ，它会在 GWTP 示例中将弹出窗口居中：- addToPopupSlot(widget, true)