内容宽度扩展时如何以编程方式重新定位 PrimeNG 对话框

Question

这里是 PrimeNG/Angular 的新手。我们有一个元素，它首先作为一个相当小的窗口打开。用户可以单击链接以展开对话框。展开时，宽度向右展开，但对话框的位置与首次打开时一样。

我知道应该有一个 dialog center() 方法，但我不知道如何连接它。谢谢！

Answer 1

以此为灵感，让它发挥作用：PrimeNG p-dialog positionTop

基本上，我在 ui-dialog 元素本身以及一些内部元素上设置了一个“扩展”类，然后以编程方式设置左侧位置。

private centerDialog() {
    const dialogElement = <HTMLElement>document.querySelector('.ui-dialog');

    if (!dialogElement) {
      setTimeout(() => {
        this.centerDialog();
      }, 100);
    } else {
      this.toggleExpandedClass();
      dialogElement.style.left =
        window.innerWidth / 2 - dialogElement.clientWidth / 2 + 'px';
    }
  }