How to programmatically recenter PrimeNG dialog when content width expands

Question

New to PrimeNG/Angular here. We have a element that first opens as a fairly small window. Users can click on a link to expand the dialog. When expanded, the width expands to the right but the dialog stays positioned as when it first opened.

I understand there's supposed to be a dialog center() method but I can't figure out how to wire it up. Thanks!

Answer 1

Got it to work by using this as an inspiration: PrimeNG p-dialog positionTop

Basically, I'm setting an 'expanded' class on the ui-dialog element itself, as well as some inner elements, and then programmatically setting the left position.

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';
    }
  }