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

score 0 · Answer 1 · answered Oct 15 '18 at 08:44

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

score 0 · Answer 2 · answered Dec 03 '19 at 15:00

Sorry for the late answer but as I have faced this issue recently and for someone who may face this issue again you can add [focusOnShow]="false" to your p-dialog. focusOnShow is by default true so the first button receives focus on show...that's why your view is on the center of the dialog. When you disable it, your view will stay on the top.

PrimeNG p-dialog positionTop

2 Answers2

Linked