[FIXED] Primeng colorpicker panel cut off


I am using the primeng colorpicker and doing

<p-colorPicker id="colorpicker" [inline]="false" [ngModel]="color" (onChange)="changeColor($event)"></p-colorPicker>

However, when I click on the colorpicker and the panel comes up, it’s cut off and looks like this:

enter image description here

How do I get the panel to pop out rather than it being cut off like that? I tried to do appendTo=body but it doesn’t do what I want and breaks the panel. Any suggestions on how to fix this?

EDIT: When I inspect the colorpicker panel, it looks like this:

enter image description here

You can see that the colorpicker is hiding behind the element and I want it to overlay this side panel. It’s a angular material sidenav if that helps give context where the colorpicker is in!


Not sure what went wrong but when I did appendTo="body" it worked for me and the colorpicker isn’t cutoff anymore!

Answered By – fairlyMinty

Answer Checked By – Terry (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published