CODEWITHSUNDEEP
cssangularprimeng
KayleeTheMech
KayleeTheMech

Reputation: 498

Overflow the PrimeNG DialogModule with the CalendarModule

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).

<p-calendar> in <p-dialog>

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);
}

Upvotes: 14

Views: 21131

Answers (7)

sakshi
sakshi

Reputation: 1

The problem with adding just appendTo="body" is that, if the p-calendar is inside a dialog, it might not overlay the dialog box. To fix this, add baseZIndex property:

<p-calendar [(ngModel)]="selectedDate" appendTo="body" baseZIndex="5000"></p-calendar>

This ensures that the datepicker of p-calendar overlays the containing dialog.

Upvotes: 0

Varun Jain
Varun Jain

Reputation: 119

I found a better solution for this. Just add a method on click listeners and select element ui date picker (click)="modifyStyle()"

In ts file import elementRef and Renderer2 constructor(private ele: ElementRef, private ren: Renderer2) {}

modifyStyle()
{
 let ui = this.ele.nativeElement.querySelector(".ui-datepicker");

if(ui)
this.ren.setStyle(ui, "top", "unset")
 }

That's it.

Upvotes: 0

mAhESh
mAhESh

Reputation: 419

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>

Upvotes: 31

Matt Harrison
Matt Harrison

Reputation: 358

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.

Upvotes: 11

Mertcan Diken
Mertcan Diken

Reputation: 15361

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.

Upvotes: 4

KayleeTheMech
KayleeTheMech

Reputation: 498

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.

Upvotes: 4

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

If you check official PrimeNG Calendar documentation, you will find list of attributes for calendar component, among them there's style attribute which you can use to add needed CSS:

<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"
[style]="{ 'position': 'relative', 'z-index': '1000' }"></p-calendar>

Upvotes: 0

Related Questions