PrimeNg p-dialog 未在第一个显示器上居中

Question

我正在构建一个 angular 2 应用程序，并且正在使用 PrimeNg p-dialog 构建一个对话框模式表单。我注意到在某些情况下，对话框 window 显示在屏幕的最左侧（而不是居中）。但是，在拖动浏览器 window 时，对话框会正确居中。

我正在使用一个非常简单的对话框（根据 primeng documentation），然后将显示设置为 true：

<p-dialog header="Title" [(visible)]="display">
    Content
</p-dialog>

知道为什么对话框从一开始就没有居中吗？

Answer 1

进一步调查后，我发现问题是对话框被 ngIf 包围了。删除后，定位得到纠正。

Answer 2

我遇到了类似的问题。对话框位置在屏幕的最右边。

在我的例子中，我使用响应式属性，因此我必须为宽度属性设置一个特定的宽度。

<p-dialog  
    width="640"
    modal="modal" 
    dismissableMask="true" 
    [responsive]="true"
    [(visible)]="display">

Answer 3

这对我有用：

我从组件中获得了对对话框的引用，如下所示：

import { Dialog } from 'primeng/dialog';
...
@ViewChild(Dialog) dialog;

在导致对话框打开的函数中，我在 setTimeout 中调用了 center 方法。

window.setTimeout(() => { this.dialog.center(); });

PrimeNg p-dialog not being centered on first display