Search code examples
vue.jsprimevue

OverlayPanel shows arrow on the wrong side (PrimeVue)

I am working with overlay panels in the PrimeVue framework, but there is an odd issue I can't fix.

As shown in the demo page the arrow is on the left side:

enter image description here

However I need it on the right:

enter image description here

After some google-searching I was able to find this bug report but I am for some reason unable to find a solution to this.

Does anybody know how to move the arrow to the right?

Solution

  • There are no property documented to show the arrow on the right side. But you can try to overwrite the styles manually. The arrows are applied as :before and :after elements of the .p-overlaypanel container. You need to define more specific styles to push the Arrows to the right. This can be done, for example, as follows:

    <OverlayPanel class="my-panel">
</OverlayPanel
...

.p-overlaypanel.my-panel:before {
  right: 10px !important;
}

.p-overlaypanel.my-panel:after {
  right: 10px !important;
}