Override PrimeNG component CSS

Question

I am using PrimeNG OverlayPanel to be displayed in dropdown click but I have a problem to move default left arrow to right position. I tried everything that was in my mind but I am out of ideas.

Can you please give me some new idea for resolving this issue?

code example: https://stackblitz.com/edit/primeng-overlaypanel-demo

dropdown arrow image

Answer 1

Your goal is override deeply incapsulated CSS. One of the possible sollution is to add an id to overlay-panel and then ovverride the desired element(in our case this is before and after pseudo-elements of a div with the p-overlay class

html:

<p-overlayPanel #op [showCloseIcon]="true" id='hello'[style]="{width: '450px'}">

css:

:host ::ng-deep #hello .p-overlaypanel::before,
    :host ::ng-deep #hello .p-overlaypanel::after
    {
      left: 80%;
    }

left: 80% is for example.

stackblitz

Answer 2

Add this to style.css:

.p-overlaypanel:after, .p-overlaypanel:before{
  left: unset !important;
  right: 1.25rem !important;
  }

Now the arrow is on the right side opposite of initial.

Additional info: avoid using :host ::ng-deep as it is deprecated.. use the style.css file instead!