覆盖面板在错误的位置显示箭头 (primeng)答案

【问题标题】：Overlay Panel shows arrow on the wrong position (primeng)覆盖面板在错误的位置显示箭头 (primeng)
【发布时间】：2020-04-16 15:42:34
【问题描述】：

我有一个 p-table，我正在使用 p-overlaypanel 进行过滤。问题是覆盖面板显示的箭头错误。箭头出现在右侧，我希望它出现在左侧。看图

Click to see the image

在此图像中，覆盖面板必须与名为 username 的行相关联。

这是我的 span 代码 HTML

   <span class="filter-button" *ngIf="col.filter">
              <p-button id={{col.field}} styleClass="no-bg-button" icon="fas fa-filter"
                [style]="{'padding':0, 'width': '20px', 'height': '20px'}" (click)="filter($event, col.field)">
              </p-button>
   </span>

这是叠加的代码：

 <p-overlayPanel #filterOverlay id="overlay">
  <input [(ngModel)]="filterInput" pInputText type="text"
    (input)="incTable.filter($event.target.value, filterField, 'contains')" placeholder=""/>
 </p-overlayPanel>

这是我的 javascript 代码：

filter(event: Event, field: string) {
  event.preventDefault();
  event.stopPropagation();

  this._incTable.reset();
  this.filterField = field;
  this.filterInput = '';
  this.filterOverlay.toggle(event);
}

当我点击跨度时，会出现覆盖面板。为表格设置宽度或更改 css 的解决方案对我不起作用。有什么解决办法吗？

版本角：8.2.14
PrimeNG 版本：8.1.1

【问题讨论】：

标签： javascript angular primeng

【解决方案1】：

试试

[appendTo]="'body'"

【讨论】：