Looking for a way to create an Edit popup dialog that includes an input form in Angular2 using the PrimeNG widgets. I have encountered issues with the dynamic content of the dialog box as shown in the screenshot.
https://i.sstatic.net/r3INA.png
I attempted to contain the CalendarModule within a div positioned above other elements. Here is a snippet of the Angular Template HTML:
<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>
Unfortunately, it appears that the DialogModule encompasses all its contents. Is there a workaround to extend beyond that frame?
How would you approach this issue?
Thank you.
P.S: The generateSafeStyle Function utilizes an injected DomSanitizer and performs effectively.
generateSafeStyle(style:string):SafeStyle{
return this.sanitizer.bypassSecurityTrustStyle(style);
}