PrimeNG p-dialog positionTop

Question

We are displaying an Angular 4 application inside IFrame. We use PrimeNG components and in one of the situations, we need to display PrimeNG p-dialog box. By default, p-dialog box is shown in the center of Iframe (in terms of height), and not the top window's (iframe container's) height.

I find a attribute positionTop in p-dialog, where we can set the height of p-dialog window, and created a directive

overlayPosition

to be used in p-dialog element as below.

<p-dialog [header]="header" [(visible)]="showLookupVariable" overlayPosition>
...
</p-dialog>

In the overLayPosition, I want to set the positionTop

import { Directive, ElementRef, OnInit, Renderer2, EventEmitter, Output } from '@angular/core';

@Directive({
  selector: '[overlayPosition]',
})
export class OverlayPositionDirective implements OnInit {
  private element: any;
  constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
    this.element = _elementRef.nativeElement;

  }

  ngOnInit() {
    this.setHeight();
  }

  setHeight() {
    const self = this;

    try {
      const offsetHeightElement = window.top.scrollY;// will be changing to Angular window later
      this.element.attributes['positionTop'].value = offsetHeightElement;
        } catch (error) {
      // Cross reference errors will be caught here
    }
  }
}

..

But the positionTop attribute turns into positiontop (with small letter t) and p-dialog does not accept the height stated in the attribute value.

Can someone suggest me the way I should be setting the positionTop from the attribute directive ?

Thanks

Answer 1

I did this with the p-confirmDialog i think you can do the same with p-dialog

openDialog() {
    this.confirmationService.confirm({
        header: 'Confirmation',
        message: 'Souhaitez-vous revenir au questionnaire?',
        accept: () => {
            //your code goes here
        }
    });

    this.centerConfirmDialog();
}

private centerConfirmDialog() {
    const confirmDialogElement = (<HTMLElement>document.querySelector('.ui-confirmdialog'));
    if(!confirmDialogElement) {
        setTimeout(() => {this.centerConfirmDialog()}, 100);
    }else {
        confirmDialogElement.style.display = "block";
        confirmDialogElement.style.top = window.parent.scrollY + (screen.height / 2) - 124  - (confirmDialogElement.offsetHeight /2) + 'px'; 

    } 
}

Where 124 is the iframe position in the host page. you can get it on the no cross domains iframe using window.frameElement.offsetTop