使用 CalendarModule 溢出 PrimeNG DialogModule

Posted 2023-03-06

【中文标题】使用 CalendarModule 溢出 PrimeNG DialogModule

【英文标题】：Overflow the PrimeNG DialogModule with the CalendarModule

【发布时间】：2017-06-02 22:56:15

【问题描述】：

我想使用 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 似乎框架了它的所有内容。是否有破解该框架的方法？

你会怎么处理？

谢谢。

P.S: generateSafeStyle 函数只是使用注入的 DomSanitizer 并且工作正常。

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

【问题讨论】：

另一个问题请参考我的reply。在这里可以使用相同的技术：

【参考方案1】：

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

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

【讨论】：

这对我不起作用。而不是在我的弹出窗口 中显示的日历，现在它显示为 100% 宽度，在我的浏览器窗口的最底部。我实际上希望日历出现在我的浏览器窗口中在同一个地方，但不被裁剪。

【参考方案2】：

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

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

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

【讨论】：

这就是解决方案！你的啤酒在我身上；）

【参考方案3】：

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

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

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

【讨论】：

我只是将我的位置设置为相对并修复它。

由于浮动标签，这对我不起作用。不得不使用 @mAhESh 的 appendTo 解决方案

【参考方案4】：

与overflow:auto on .ui-dialog-content有关

在对话框中有一个类 .ui-dialog-content 的 div 使溢出：在该 div 中可见，它将解决这个问题。

【讨论】：

是的，这是我的问题的解决方案，使用我自己的弹出窗口。我没有意识到添加“溢出：可见”实际上与根本没有“溢出”设置有不同的行为。

【参考方案5】：

如果您检查official PrimeNG Calendar documentation，您会发现日历组件的属性列表，其中有style 属性，您可以使用它来添加所需的CSS：

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

【讨论】：

这正是我所做的，只是使用 DomSanitizer。如果我按照您所说的那样做，它还会产生这个漂亮的警告：“警告：清理不安全的样式值 [object Object]（请参阅g.co/ng/security#xss）。”

@YvonneReinhardt 我认为您不需要使用DomSanitizer。我刚刚测试了我提供的代码，它的工作没有任何问题/警告。

好的，我可能不需要 div，然后如果没有 DOMSanitizer，我也不会收到任何警告。但是，这不是问题，因为 CalendarModule 仍然在 DialogModule 及其丑陋的滚动条内... grrr 感谢您的尝试 :-)

@YvonneReinhardt 那是 CSS 问题，但这就是样式应用于 p-calendar 的方式。

【参考方案6】：

我为此找到了更好的解决方案。只需在点击侦听器上添加一个方法并选择元素 ui 日期选择器 (点击)="修改样式()"

在ts文件中导入elementRef和Renderer2 构造函数（私有 ele：ElementRef，私有 ren：Renderer2）

modifyStyle()

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

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

就是这样。