Overflow the PrimeNG DialogModule with the CalendarModule

Question

I want to build an Edit popup dialog with an input form in Angular2 using the PrimeNG widgets. I run into trouble with dynamic content of that dialog box (see screenshot).

I've naïvely been trying to wrap the CalendarModule in a div that is positioned above the other elements. (see Angular Template HTML below)

<p-dialog [(visible)]="display" [modal]="true" [resizable]="false">
...
<table class="ui-datatable-responsive">

<tbody>
  <tr>
    ...
  </tr>
  <tr>
    <td class="ui-cell-data">Start By:</td>
    <td class="ui-cell-data">
      <div [style]="generateSafeStyle('position:relative; z-index:1000')">
        <p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"></p-calendar>
      </div>
    </td>
  </tr>
 </tbody>
 ...
</table>
</p-dialog>

However it seems the DialogModule frames all its content. Is there a hack to overflow that frame?

How would you handle that?

Thank you.

P.S: The generateSafeStyle Function just uses an injected DomSanitizer and works fine.

generateSafeStyle(style:string):SafeStyle{
 return this.sanitizer.bypassSecurityTrustStyle(style);
}

Answer 1

just use appendTo="body", it will show calendar above all, even if it is in table, popup or scroll panel

<p-calendar [(ngModel)]="invariable.value" dateFormat="mm/dd/yy" required appendTo="body" readonly></p-calendar>

Answer 2

So I would guess things have changed since this was originally asked, but I found that if I added

[contentStyle]="{'overflow': 'visible'}"

to the p-dialog it allowed the calendar popup to overflow the dialog border.

Answer 3

The only thing that worked so far were the following style options:

<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="dueDate" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}">

This however smashed up the table. So I got rid of the table and used flexboxes to align the elements. Looks better anyway like this.

Answer 4

It's related to overflow:auto on .ui-dialog-content

In dialog there is a div with class .ui-dialog-content make overflow:visible in that div and it will fix this problem.