primeng

PrimeNg color picker overlay hidden behind dialog

I'm using PrimeNG color picker overlay inside a dialog.

<p-colorPicker [(ngModel)]="activity.color" name="color" appendTo="body"></p-colorPicker>

The problem is that picker is not showing and expands the dialog body adding the scrollbars. I want the colorpicker to overlay over the dialog.

Setting appendTo="body" works for calendar widget, but not color picker. Based on docs I experimented with various options like e.g. specifying template variable in dialog <p-dialog #activityDialog ... and referencing it in appendTo of colorpicker, but this is not working.

enter image description here

Solution

  • Update:

    <p-dialog [contentStyle]="{'overflow':'visible'}">
</p-dialog>

    this does it all and is documented already: here

    I got it to work by setting:

    :host /deep/.ui-dialog .ui-dialog-content {
    overflow: visible;
}

    in the css of the component containing the dialog. Though :host /deep/ is deprecated by Angular