title: PrimeNG p-dialog positionTop
body: <p>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. </p>
  
  <p>I find a attribute positionTop in p-dialog, where we can set the height of p-dialog window, and created a directive </p>
  
  <blockquote>
    <p>overlayPosition</p>
  </blockquote>
  
  <p>to be used in p-dialog element as below.</p>
  
  <pre><code>&lt;p-dialog [header]="header" [(visible)]="showLookupVariable" overlayPosition&gt;
  ...
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>In the overLayPosition, I want to set the positionTop</p>
  
  <pre><code>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
      }
    }
  }
  </code></pre>
  
  <p>..</p>
  
  <p>But the positionTop attribute turns into positiontop (with small letter t) and p-dialog does not accept the height stated in the attribute value.</p>
  
  <p>Can someone suggest me the way I should be setting the positionTop from the attribute directive ?</p>
  
  <p>Thanks</p>