Primeng: p-overlay arrow tip is always on left.

[sunnyyadav100]

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

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

Expected behavior

p-overlay should get adjusted based on direction.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 5.X
  
  7.2.4

• PrimeNG version: 5.X
  
  7.0.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  all

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[sunnyyadav100]

It is same as https://github.com/primefaces/primeng/issues/7218.
I think we can close this.

[yigitfindikli]

Duplicate #7218

[sunnyyadav100]

I took 7.1 RC build, sometimes overlay arrows tip appears on wrong side.
I am hiding the arrow tip by overriding the CSS.

[Cito]

@sunnyyadav100 we need a test case e.g. with stackblitz - for me it works with 7.1 rc

[sunnyyadav100]

Here is my use case -
https://github-mgay5t.stackblitz.io/

But I am not able to reproduce it in stackblitz.

In my code, on first visit of a hyperlink, arrow tip is misalign but after that is appearing fine.

[Cito]

Hi @sunnyyadav100 thanks for the stackblitz. The current solution still has these two shortcomings:

1. To see the effect in your stackblitz, you must make the whole page very narrow, since you used the middle column f3. It works better with f5 or if you use fixed side top level table so that you can scroll horizontally. In the case of a very narrow page and a wide overlay, neither left nor right side tip might be appropriate - the tip would need to be moved to somewhere in the middle. The overlay component would have to adjust the tip position dynamically by changing the style instead of switching between two classes with the two given positions left and right. But the current solution is already much better than before where the tip only appeared on the left hand side.

2. The other problem is that the size of the overlay must be known beforehand because the tip position is miscalculated otherwise since the overlay is instantiated before we show it. In the stackblitz you have a table inside the overlay with a dynamic size. If you set a fixed width for the overlay or the table inside with [style]="{'width':'500px'}" then everything should work properly. This can also happen when you are loading images in the overlay, and the images don't have a width set in their img tag or style. This can also cause the "works only on second click" effect (on the first click, the image size is still unknown - on the second click, the images are already loaded and their size is known). You can see this in the overlay demo shipped with PrimeNG, if you put the button on the right side. It only works when you give the images a fixed width. I have done that in 56e62b70d7ddba42ad409f5cd9a90db661db57df to show how overlaypanel works on the right-hand side (where you usually put your buttons). Unfortunately in 014af32b72b9d7b0596b69eb63901b73b7d14dcf the buttons were moved back again to the left hand side, so the demo can't be used to show the right-side tips any more.

[evaducakova]

I took 7.1 RC build, sometimes overlay arrows tip appears on wrong side.
I am hiding the arrow tip by overriding the CSS.

How can I hide it?

[sunnyyadav100]

I took 7.1 RC build, sometimes overlay arrows tip appears on wrong side.
I am hiding the arrow tip by overriding the CSS.

How can I hide it?

I have used following SCSS rule -

.ui-overlaypanel {
      &:before {
          bottom: none;
          left: unset;
          position: unset;
          content: unset;
      }
      &:after {
        border-bottom-color: transparent;
        border-top-color: transparent;
      }
    }