Primeng 拾色器面板被切断
Primeng colorpicker panel cut off
我正在使用 primeng 颜色选择器并在做
<p-colorPicker id="colorpicker" [inline]="false" [ngModel]="color" (onChange)="changeColor($event)"></p-colorPicker>
但是，当我点击颜色选择器并出现面板时，它被截断了，看起来像这样：
如何让面板弹出而不是像那样被切断？我尝试执行 appendTo=body 但它没有执行我想要的操作并且破坏了面板。关于如何解决这个问题有什么建议吗？
编辑： 当我检查颜色选择器面板时，它看起来像这样：
您可以看到颜色选择器隐藏在元素后面，我希望它覆盖此侧面板。这是一个 angular material sidenav 如果这有助于提供颜色选择器所在的上下文！
您可以通过添加 left: unset !important 和 right: 0 来覆盖组件的样式。
面板默认采用这种计算样式。通过重置 left 属性 并设置 right 属性，您将能够看到以其他方式显示的面板。
概念验证
通过检查器，我按照我说的修改了样式。结果如下：
解决了你说的问题，完全显示了拾色器。
SCSS Class 我会实现
:host ::ng-deep .p-colorpicker-panel {
left: unset !important;
right: 0;
}
为什么 !important 在左边 属性？
从我在组件上看到的，左边属性直接是面板上的内联样式。因此，如果没有它，只需设置 left: unset，您就会遇到一些优先级问题。内联样式具有最高优先级，并且 ignore/override 您尝试对 class .p-colorpicker-panel
进行样式化
为什么 :host ::ng-deep？
参考这个link
不确定出了什么问题，但是当我这样做时 appendTo="body" 它对我有用并且颜色选择器不再被截断！
我正在使用 primeng 颜色选择器并在做
<p-colorPicker id="colorpicker" [inline]="false" [ngModel]="color" (onChange)="changeColor($event)"></p-colorPicker>
但是，当我点击颜色选择器并出现面板时，它被截断了，看起来像这样：
如何让面板弹出而不是像那样被切断？我尝试执行 appendTo=body 但它没有执行我想要的操作并且破坏了面板。关于如何解决这个问题有什么建议吗？
编辑： 当我检查颜色选择器面板时，它看起来像这样：
您可以看到颜色选择器隐藏在元素后面，我希望它覆盖此侧面板。这是一个 angular material sidenav 如果这有助于提供颜色选择器所在的上下文！
您可以通过添加 left: unset !important 和 right: 0 来覆盖组件的样式。
面板默认采用这种计算样式。通过重置 left 属性 并设置 right 属性，您将能够看到以其他方式显示的面板。
概念验证
通过检查器，我按照我说的修改了样式。结果如下：
解决了你说的问题，完全显示了拾色器。
SCSS Class 我会实现
:host ::ng-deep .p-colorpicker-panel {
left: unset !important;
right: 0;
}
为什么 !important 在左边 属性？
从我在组件上看到的，左边属性直接是面板上的内联样式。因此，如果没有它，只需设置 left: unset，您就会遇到一些优先级问题。内联样式具有最高优先级，并且 ignore/override 您尝试对 class .p-colorpicker-panel
为什么 :host ::ng-deep？
参考这个link
不确定出了什么问题，但是当我这样做时 appendTo="body" 它对我有用并且颜色选择器不再被截断！