OverlayPanel centered

[Angelminster]

Hi,

Is there an easy way to show an overlayPanel centered?

Thank you

[cagatay.civici]

OverlayPanel is always positioned relative to its target, feel free to create a feature request though, it should be easy to implement.

[Angelminster]

It would be perfect if we can do something like

<p-overlayPanel [position]="bottom-center">
</p-overlayPanel>

top | bottom | rigth | left -> this will force the overlay panel to show there. This Feature is lesser important than the next one.
left | center | rigth -> this will "move" the overlay panel in X axys to display centered relative to its parent. rigth is your default value . Its like changing left attribute of ui-overlaypanel manually.

Thank you!

[cagatay.civici]

In your first post, so do you mean centered relative to its target, I thought you mean center of the window.

[Angelminster]

The window centered. This will be the second configuration part. Like this :
https://www.princeton.edu/nmc/nmckb/ima ... -Icons.png

This represents the first configurations options
https://i-msdn.sec.s-msft.com/dynimg/IC166312.png

When the "share" button is pulled rigth until the end of the screen the popup doesn't resize properly because the screen ends.
We want to configure the direction of the Overlaypanel growing . Beginning in the bottom-left relative to its button and increasing size to the left

This would be rigth-center
https://eclecticlightdotcom.files.wordp ... .jpg?w=940

Your overlay panel now shows top or botton (depends on the window space) and always rigth. The same but LEFT, growing to the left.

Regards

[cagatay.civici]

Thank you for the feedback, please create a request at github.

[kyriv]

I used the following css class applied to the overlaypanel to center mine.

Code: Select all

.Centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Code: Select all

<p:overlayPanel styleClass="Centered" ... >