0

在按钮上单击一个 NgbModal 模态框将被加载。模态具有 ag-grid-angular 组件。

此网格有一个日期选择器列。我正在使用primeng日期选择器。日历显示的 HTML 代码。

   <p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>

这里的问题是日期选择器日历总是隐藏在网格内。像这样。我该如何解决这个问题。

在此处输入图像描述

4

3 回答 3

1

这可以通过查看overflowCSS 类的 CSS 属性来解决.ag-root-wrapper。

此类在<ag-grid-angular>指令上声明（参见屏幕截图）。 在此处输入图像描述

我的解决方案是在包含指令overflow的组件的 css 中包含对属性的覆盖。<ag-grid-angular>（我在我的 html 中包含 ag-grid 的组件）。

// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
  overflow: visible;
}

以下Stack Overflow Post帮助我确定了解决方案。

于 2020-08-26T13:55:47.510 回答
1

像这样添加 appendTo="body"：

<p-calendar appendTo="body" class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>
于 2020-10-06T12:10:01.053 回答
0

这里的问题是日历弹出窗口被容器剪裁了。这是使用日期选择器时的常见问题。

要解决这个问题，您需要将弹出元素设置为文档正文，最简单的解决方案是添加[appendTo]="'body'"到您的日历组件，这是一个存在于primeng-calendar 的API 上的属性。

有关实现的更多详细信息，请参阅此博客，因为它有一个使用 primeng 和 ag-grid 的示例：https ://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/ #附加正文

于 2020-09-24T18:26:21.850 回答