CODEWITHSUNDEEP
vue.jsprimevue
skrat
skrat

Reputation: 748

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?

Upvotes: 1

Views: 1411

Answers (1)

Serg
Serg

Reputation: 845

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;
}

Upvotes: 1

Related Questions