'Override PrimeNG component CSS

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

htmlcssangularprimeng


Solution 1:[1]

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!

Solution 2:[2]

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

Solution 3:[3]

.mybutton .p-overlaypanel:after, .mybutton .p-overlaypanel:before {
    bottom: 100%;
    content: " ";
    height: 0;
    right: 1.25rem; //<---
    pointer-events: none;
    position: absolute;
    width: 0;
}

is the place but the question is; how you wish to handle button positioning on page. If button near left,right,bottom border then you should handle arrow position. by this variable.

Solution 4:[4]

Convert your entire Angular project to Scss. The reason is that View styles do not go deep. Scss in root does go deep and is worth it long term to stop using just CSS in Angular projects. I wrote an article on this.

Solution 5:[5]

For p-overlaypanel
:before and :after are the attributes you should catch for this to work

 body .p-overlaypanel:before {
    left: calc(100% - 17px);
  }

  body .p-overlaypanel:after {

    left: calc(100% - 17px);
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cédric S
Solution 2 ???? ???????????
Solution 3 Mehmet_
Solution 4 JWP
Solution 5

Related Questions