primevue icon indicating copy to clipboard operation
primevue copied to clipboard

OverlayPanel: open position bug

Open NeluQi opened this issue 4 years ago • 7 comments

Sometimes the OverlayPanel opens crookedly, either off-screen, or not near the clicked point.

Light codesandbox example https://codesandbox.io/embed/beautiful-engelbart-ss1q0?fontsize=14&hidenavigation=1&theme=dark

Try to place the button on all 4 sides and look at the behavior, in my project OverlayPanel often opens incorrectly and I have to scroll the page

image

image

image

NeluQi avatar Sep 22 '21 06:09 NeluQi

P.S. The second screenshot is a way out of the bottom border of the browser

NeluQi avatar Nov 12 '21 09:11 NeluQi

Hi @NeluQi,

Unfortunately, I still couldn't replicate this issue. What step do I need to follow to replicate it? Could you please update codesandbox link according to your case?

Thanks a lot!

mertsincan avatar Nov 12 '21 14:11 mertsincan

Hi @NeluQi,

Unfortunately, I still couldn't replicate this issue. What step do I need to follow to replicate it? Could you please update codesandbox link according to your case?

Thanks a lot!

image

image

https://codesandbox.io/embed/mystifying-silence-2rdhw?fontsize=14&hidenavigation=1&theme=dark

I tried to reproduce it now and I'm not good at it

Now the problem occurs much less frequently. May have already been fixed in new versions.

I was able to reproduce strange behavior sometimes

Try it in different combinations with scrolling and dialogue in different parts of the screen

It seems that this is not particularly relevant now, the bug is very rare

NeluQi avatar Nov 13 '21 03:11 NeluQi

Hi @NeluQi, Thanks a lot for the sample and detailed explanations! I'm pushing this issue to the next version for now. Looks like we need to run a lot of tests related to OverlayPanel.

Best Regards,

mertsincan avatar Nov 18 '21 08:11 mertsincan

In my project, the panel arrow is shifted.

I spent a bunch of time doing this in a sandbox but could not reproduce

I found out that in my project, this only happens with the right panel opening

This is strange because the css is standard, I only replaced the colors

This panel doesn't look its best on mobile.

BUG: image

GOOD: image

NeluQi avatar Dec 16 '21 05:12 NeluQi

This is still an issue, I was able to reproduce the bug on PrimeVue docs themselves:

https://user-images.githubusercontent.com/34019878/223940310-314393dc-7dcc-499f-a6ec-d1d3043443f6.mp4

martinszeltins avatar Mar 09 '23 10:03 martinszeltins

Still an issue with my app too... It looks like if the button calling is located towards the right side of the page and with width of the Popover is fairly large, the Point Arror portion is to the left side of the Popover, but it should be on the right side under the calling button.

JediPixels avatar May 22 '24 02:05 JediPixels

Due to PrimeTek's demanding roadmap for PrimeVue and the limited bandwidth of the core team, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

github-actions[bot] avatar Dec 27 '24 11:12 github-actions[bot]