0

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!

fairlyMinty
  • 413
  • 8
  • 22

2 Answers2

1

You could override the style of the component by adding left: unset !important and right: 0.

Actual style of the panel

The panel has this computed style by default. By resetting the left property and setting the right property, you will be able to see the panel displayed in the other way.

Proof of concept

Via the inspector, I modified the style like I said. The result is the following:

Proof of concept that this is working

It resolves the problem you are talking about, and fully display the color picker.

SCSS Class I would implement

:host ::ng-deep .p-colorpicker-panel {
  left: unset !important;
  right: 0;
}

Why !important on left property ?

From what I saw on the component, the left property is directly an inlined style on the panel. So, you would have some problem of priority without it, by simply setting left: unset. The inline style has an highest priority, and would ignore/override your attempt of stylizing the class .p-colorpicker-panel

Why :host ::ng-deep ?

See for reference this link

Axiome
  • 695
  • 5
  • 18
  • So it's basically you'll shift the colorpicker panel to the left right? – fairlyMinty Oct 22 '21 at 19:17
  • Exactly, I guess it is a fair fix so there is not anymore any overflow outside of the viewport. The problem of your template is that the color picker is on the extreme right edge from what I see. They designed the color picker to open itself "on the right" from what I experienced. It is a shame not to have a parameter to choose the way it opens. But you can override the position of the panel so it is opening "on the left". If you want to do that another way, be sure to precise it in your question, and I will try to refine your need in a new direction – Axiome Oct 22 '21 at 23:41
  • Yes, I want to keep the color picker on the right side and have it overlay the side panel. Right now it is currently cutoff and behind the sidepanel. I added another image for reference so that will help – fairlyMinty Oct 23 '21 at 01:47
1

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

fairlyMinty
  • 413
  • 8
  • 22