Primeng: OverlayPanel Positioning

[bohms27]

Right now, the overlay panel always appears below and to the right of the target div no matter where the div is on the page. I would like to request an option for it to appear to the left if there is not enough screen real estate on the right side. More of a "dynamic positioning" of the overlay panel instead of always appearing below and to the right.

As a temporary fix, implementing an option to make the panel appear to the left OR right based on the setting would be great.

[izll]

+1

[marcelcremer]

+1

[adenizc]

+1

[skdhir]

+1

[ilianiv]

Yep, positioning doesn't care where in DOM is overlay panel positioned.

For example:
If overlay panel's parent is relatively/absolutely positioned or is a table cell the panel will be situated far away because positioning logic in PrimeNG's DomHandler class determines offsets from the viewport but not from panel's parent. It may use offsetLeft & offsetTop in such cases.

[alexandr8558]

+1
It would be perfect if we can do something like

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.

[cagataycivici]

Try with 4.x please, it has collision detection improvements.

[zfanning]

Tried it with 4.x and same result. Is there not a way to specify top/bottom, left/right?

[zfanning]

Problem was that it is bigger than the "container" which was a component. Changing the aboslutePosition prototype code fixed the issue. I think that the logic in that function needs to be updated. I'll try tonight and submit a PR. (I have no idea how to contribute, I'll have to do some research on that as well)

[PikaChokeMe]

Is there still no way to do this?
I've just started looking at primeNG as it's being adopted for use in our company and I want to be able to use the overlay because it looks amazing, however because of where it shows up on the page and because of various resolutions we support, the panel actually ends up being cut off.

[prashantbirajdar]

It would be great if you provide positioning like my="left top" at="left bottom"

[StatikVerse]

This is probably hard to do. Lol.

[dhniels]

Relates to https://github.com/primefaces/primeng/issues/2567

[jbermanwebguru]

I fixed this by creating a div element with a certain size, and using that as the target when opening the overlay.

<div
  #overlayTarget
  style="width: 200px; height: 30px; margin-top: -30px;"
></div>

export class MyComponent {
  @ViewChild('overlayTarget')
  overlayTarget: ElementRef;

  @ViewChild('myDialog')
  myDialog: OverlayPanel;

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.myDialog.show(event, this.overlayTarget.nativeElement);
  }
}

[buseodaci]

I fixed this by creating a div element with a certain size, and using that as the target when opening the overlay.

<div
  #overlayTarget
  style="width: 200px; height: 30px; margin-top: -30px;"
></div>

export class MyComponent {
  @ViewChild('overlayTarget')
  overlayTarget: ElementRef;

  @ViewChild('myDialog')
  myDialog: OverlayPanel;

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.myDialog.show(event, this.overlayTarget.nativeElement);
  }
}

Can you share all code ?

[desprit]

@buseodaci

This is actually all code :)
The show method (as well as toggle) accepts an optional argument target which is an HTML element of your choice. In my case, I have a table where the last column has a button to open an overlay window. Once clicked, I create a target element like this:

const target = event.target.closest("tr").querySelector(".the-first-cell-class")

I then pass it to the show method.

[buseodaci]

@desprit Thank you for your comment it was long time ago. I didn't use overlay panel. I just create this.
Might be help to anybody.

https://stackblitz.com/edit/angular-overlay-ngfor-rx

[NejcCarl]

In primeng 9 there is no option for orientation. If you look at the source code, there are two classes that deal with left to right and up and down orientation: .ui-overlaypanel-shifted and .ui-overlaypanel-flipped.

So if you want to change the overlay orientation from right to left you can just apply the styles from these classes in your components styles for example:
::ng-deep .ui-overlaypanel {
left: unset !important;
right: 58px;
.ui-overlaypanel-content {
padding: 0 !important;
}
&:after {
margin-right: -8px;
left: auto;
right: 1.25em;
margin-left: auto;
}
&:before {
display: none;
}
}