PrimeNG p-对话框位置顶部 [英] PrimeNG p-dialog positionTop

问题描述

我们正在 IFrame 中显示一个 Angular 4 应用程序.我们使用 PrimeNG 组件，在其中一种情况下，我们需要显示 PrimeNG p 对话框.默认情况下，p 对话框显示在 iframe 的中心(就高度而言)，而不是顶部窗口(iframe 容器)的高度.

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-dialog中找到了一个属性positionTop，可以设置p-dialog窗口的高度，并创建了一个指令

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

叠加位置

用于 p-dialog 元素，如下所示.

to be used in p-dialog element as below.

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

在overLayPosition中，我想设置positionTop

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

...

但是positionTop属性变成了positiontop(带小写字母t)，p-dialog不接受属性值中的高度.

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

有人可以建议我从属性指令中设置 positionTop 的方式吗?

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

谢谢

推荐答案

抱歉回答晚了，因为我最近遇到了这个问题，对于可能再次遇到这个问题的人，您可以添加 [focusOnShow]="false" 到您的 p-dialog.focusOnShow 默认情况下为 true，因此第一个按钮在显示上获得焦点...这就是您的视图位于对话框中心的原因.当您禁用它时，您的视图将保持在顶部.

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-对话框位置顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！