用 CalendarModule 溢出 PrimeNG DialogModule

Question

我想使用 PrimeNG 小部件在 Angular2 中构建一个带有输入表单的编辑弹出对话框。我遇到了该对话框的动态内容的问题（见截图）。

我天真地试图将 CalendarModule 包装在位于其他元素上方的 div 中。（请参阅下面的 Angular 模板 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>

然而，DialogModule 似乎包含了它的所有内容。有没有破解该框架的方法？

你会怎么处理？

谢谢你。

PS： generateSafeStyle 函数只使用注入的 DomSanitizer 并且工作正常。

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

Answer 1

所以我猜自从最初提出这个问题以来事情已经发生了变化，但我发现如果我添加

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

对于 p-dialog，它允许日历弹出窗口溢出对话框边框。

Answer 2

只需使用appendTo =“body”，它会首先显示日历，即使它在表格，弹出窗口或滚动面板中

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

Answer 3

到目前为止唯一有效的是以下样式选项：

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

然而，这打破了桌子。所以我摆脱了表格并使用 flexboxes 来对齐元素。反正这样更好看。

Answer 4

如果您查看官方 PrimeNG 日历文档，您将找到日历组件的属性列表，其中有一个style属性可用于添加所需的 CSS：

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