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

Please refer to my [reply](https://stackoverflow.com/a/54802344/1506118) on another question. The same technique can be used here: — developer, Feb 21 '19 at 09:16

score 24 · Answer 1 · answered Apr 21 '20 at 06:51

24

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>

answered Apr 21 '20 at 06:51

mAhESh

349
2
2

This didn't work for me. Rather than the calendar appearing cropped in my popup
, now it appeared 100% width, at the very bottom of my browser window. I actually want the calendar to appear *at the same place* on my browser window, but not cropped.
– Mike Gledhill Nov 17 '20 at 13:38
This works, it's the recommended (by PrimeNg )Solution for this case ;) thx^ – HolzbeinWilli May 30 '23 at 10:10

score 9 · Answer 2 · answered Mar 27 '18 at 21:11

9

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.

answered Mar 27 '18 at 21:11

Matt Harrison

338
3
10

That's the solution! Your beer is on me ;) – speti43 Sep 30 '19 at 14:38

score 4 · Answer 3 · answered Jan 20 '17 at 13:23

4

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.

answered Jan 20 '17 at 13:23

KayleeTheMech

489
1
4
17

I just set my position to relative and that fixed it. – Jeff Sep 12 '17 at 21:51
This did not work for me because of the floating label. Had to use appendTo solution from @mAhESh – Mathias Apr 12 '21 at 05:55

score 4 · Answer 4 · answered Jan 24 '17 at 14:19

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.

answered Jan 24 '17 at 14:19

Mertcan Diken

14,483
2
26
33

Yup, this was the solution for my issue, using my own popup. I didn't realise that adding "overflow:visible" actually has a different behavior to not having an "overflow" setting in there at all. – Mike Gledhill Jan 13 '21 at 12:44

score 0 · Answer 5 · answered Jan 18 '17 at 14:13

0

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>

answered Jan 18 '17 at 14:13

Stefan Svrkota

48,787
9
98
87

This is exactly what I do, just with the DomSanitizer. If I do it as you state, it additionally produces this beautiful warning: "WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss)." – KayleeTheMech Jan 18 '17 at 14:23
@YvonneReinhardt I don't think you need to use `DomSanitizer`. I just tested the code I provided and it's working without any issues/warnings. – Stefan Svrkota Jan 18 '17 at 14:26
Okay, I might not need the div, and then I don't get any warning without the DOMSanitizer as well. However, this is not the issue, because the CalendarModule is still framed within the DialogModule and its ugly scrollbars... *grrr* Thanks for trying :-) – KayleeTheMech Jan 18 '17 at 14:32
@YvonneReinhardt That's CSS problem then, but this is how style is applied to `p-calendar`. – Stefan Svrkota Jan 18 '17 at 14:36

score 0 · Answer 6 · answered Mar 17 '21 at 12:21

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.

Overflow the PrimeNG DialogModule with the CalendarModule

6 Answers6