More alignment options to OverlayPanel

[dhniels]

[x] feature request

Looking for a way to align the overlay panel, by default it aligns the top and left edge to its parent element, but it would be nice to have other ways to align it.

For example:

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right
• right-top
• right-center
• right-bottom
• left-top
• left-center
• left-bottom

[PikaChokeMe]

This would be an extremely helpful feature to have as the current positioning of the overlay panel in conjunction with my current pages layout leads to the overlay getting cut off at certain browser resolutions.
This essentially makes the panel in it's current state useless.

[dhniels]

Any updates on this feature? Ideally you could do something like this with it (add a little arrow pseudo element and position it to an element instead of the default left/top corner):

[mkp05]

Any news about this feature? For a start is range similar to "tooltipPosition" from tooltip component would be enough (especially as tooltip does not accept a HTML for a text, so it's impossible to put for example an image in the tooltip - need to use OverlayPanel).

[dhniels]

I found this example of a popover (built on Angular CDK) that provides a horizontalAlign and verticalAlign option set that is exactly what I'm looking for. I just tried using it in my app and I like it a lot.

Check it out @cagataycivici ! There are some additional neat options provided. I think PrimeNG should glean some of the functionality ideas theyve employed here. Adding an arrow on top of that would make OverlayPanel a killer component :)

[JacobSiegle]

Seems like if this was implemented it would be useful in implementing #5213.

[televic-education-ruben]

Is this feature on the roadmap for the near future? If you want, I can implement this and create a pull request for it...

[cagataycivici]

Planned for 6.1.3.

[SwintDC]

Is the development for this already started? And is it planned for the 6.1.3 or 6.1.4 release? This is a feature we really need urgently. If the development is not started yet by the primeng team, would you consider merging a pull request created by us?

[caitlinrouille]

Why was this removed from the 6.1.3 milestone? Please consider the pull request from SwintDC, not sure what the thumbs down was all about but any additional hands is appreciated by the community.

[JacobSiegle]

Thumbs down because the prev comment to cagataycivici asks about putting in a PR and he ignored it which means they must want to do it internally (also backed by "Planned for 6.1.3.") and will not accept a PR.

In the latest dev blog they state they have pushed it back to 7.0, "big ticket new features like the new DialogService and OverlayPanel enhancements will be in 7.0.0".

[thomassanders]

Any news on this feature? I suppose this is not part of 7.1.0 yet?
Thanks for the update!

[moshmage]

version 8.x is out and exists, but this feat has been pushed into limbo?

[c123dl]

no support yet? i hate to say if there is no support i will have to use something else,
but is seems like no proggress for overlay panel issues at all.

[CronGM]

This is a feature that paid clients are requesting and it's sadly being ignored. If it's not being developed internally at least they should accept open PRs from the community.

[JacobSiegle]

The project is open source so you can build it yourself for your own personal use. After drop in a PR and hope for the best. If they decline it you can always still share your fork with others here.

[jpgoelz]

Still nothing?

[augustobreno]

Also waiting for this fix.... after more then 3 years.

[komaira]

Any update on this request?

[AxTulti]

Just as an idea if someone really needs to make this work urgently, I came up with a "fix", it is a bit hacky, but it does the job.
I was trying to make the p-overlayPanel work on smaller screens (such as smartphones or tablets), but they tend to overflow the screen, so I inserted a <style> tag, to modify the p-overlayPanel aspect on smaller screens, it looks something like this:
<style> .p-overlaypanel { left: 5% !important; right: 5% !important; } </style>
The tag modifies the overlay position, to be 5% away from left and right, thus making it work on smartphones and tablets, i know it is not clean, but it works, and when used with media query's, it results in a much better UI.
So, in my case it passed from this:

to this:

By the way, sorry for the text in Spanish, the project I'm working on is in Spanish.
Well, hope this is useful, if someone finds a cleaner solution, please let us know.

[daniatic]

Any updates on this?

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[Michael-Ziluck]

This was not completed and needs to be reopened @mertsincan

[ysk3a]

Has it been added behind the scene and not in the documentation?
The overlaypanel is opening on top of my other components when I would like it to open top right or top center.
It would be nice to have more alignment options to control where to position the overlaypanel so that i can make it overlap on elements that are ok to overlap or not.
Using v16.0.1.

[Michael-Ziluck]

This issue was recreated as #13025 for anyone looking for an open ticket. Anyone who reacted to this issue should re-react over there.