【问题标题】：Primeng colorpicker panel cut offPrimeng 拾色器面板被切断
【发布时间】：2021-10-19 17:14:09
【问题描述】：

我正在使用primeng colorpicker并做

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

但是，当我点击颜色选择器并且面板出现时，它被切断并看起来像这样：

如何让面板弹出而不是像那样被切断？我试图做appendTo=body，但它没有做我想做的事情并破坏了面板。有关如何解决此问题的任何建议？

编辑：当我检查颜色选择器面板时，它看起来像这样：

您可以看到颜色选择器隐藏在元素后面，我希望它覆盖这个侧面板。如果这有助于提供颜色选择器所在的上下文，它就是一个有角度的材质 sidenav！

【问题讨论】：

【解决方案1】：

您可以通过添加left: unset !important 和right: 0 来覆盖组件的样式。

面板默认具有这种计算样式。通过重置left 属性并设置right 属性，您将能够看到以另一种方式显示的面板。

概念证明

通过inspector，我按照我说的修改了样式。结果如下：

解决了你说的问题，完全显示颜色选择器。

我将实现的 SCSS 类

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

从我在组件上看到的，left属性直接是面板上的内联样式。因此，如果没有它，您将遇到一些优先级问题，只需设置left: unset。内联样式具有最高优先级，并且会忽略/覆盖您对 .p-colorpicker-panel987654333@

进行样式化的尝试

参考link

【讨论】：

所以基本上你会将颜色选择器面板向左向右移动？
没错，我想这是一个公平的解决方案，因此视口之外不再有任何溢出。您的模板的问题是颜色选择器位于我所看到的最右边。他们将颜色选择器设计为根据我的经验“在右侧”打开。没有一个参数来选择它的打开方式是一种耻辱。但是您可以覆盖面板的位置，使其在“左侧”打开。如果您想以另一种方式做到这一点，请务必在您的问题中准确说明，我会尝试在新的方向上完善您的需求
是的，我想将颜色选择器保留在右侧，并将其覆盖在侧面板上。现在它目前处于截止状态，位于侧面板后面。我添加了另一张图片以供参考，这样会有所帮助

【解决方案2】：

不知道出了什么问题，但是当我这样做时 appendTo="body" 它对我有用，并且颜色选择器不再被切断！

【讨论】：