How to set a margin position for primeNG overlay pannel?

Question

I want to set margin-top and margin-left position for primeNG overlay panel dynamically. How to achieve this?

Answer 1

You can achieve that with the tag [style] in your html:

<p-overlayPanel [style]="marginStyle">
</p-overlayPanel>

and declaring the margin that you want in the .ts like this:

positionLeft = '90px'; 
positionTop = '20px';
marginStyle = { 'margin-left': this.positionLeft , 'margin-top': this.positionTop };

You can check the live example here: https://stackblitz.com/edit/primeng-overlay-position-style