Overlay Panel / Confirm Popup The arrow shows wrong

[AlbaSS18]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

I have a p-table and I am using a p-overlaypanel to filter. The problem is that the overlaypanel shows the arrow wrong.The arrow appears on the right and I want it to appear on the left. See the image

In this image, the overlaypanel must be associated with the row called username.

This is my code HTML of span

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

And this is the code of overlay:

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

And this is my code in javascript:

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

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

When I click in the span, the overlaypanel appears. The solution of setting a width to the table or changing the css doesn't work for me. Any solution?

Please tell us about your environment:

• Angular version: 8.2.14

• PrimeNG version: 8.1.1

• Browser: Firefox 74.0

• Language: TypeScript

[Xakaloz]

Hi,
I "fixed" that by adjusting the ::after and ::before elements' margin attributes :

.ui-overlaypanel {
    &.ui-overlaypanel-shifted {    
        &::after {
            margin-right: 15px !important;
        }
    
        &::before {
            margin-right: 13px !important;
        }
    }

    &::after {
        margin-left: 0px !important;
    }
    
    &::before {
        margin-left: -2px !important;
    }
} 

This is not the ideal solution, but it works.

[Olmer1st]

I have the same problem, it happens with large screens (angular 11, primeng 11)

Looks like a problem in align() function, when you add flipped class , especially when the target located on right side of the screen.