日期选择器隐藏在NgbModal中加载的ag-grid-angular中
日期选择器隐藏在NgbModal中加载的ag-grid-angular中
提问于 2020-08-07 20:11:02
单击按钮，将加载一个NgbModal模式框。该模态具有一个ag-grid-角度组件。
此网格有一个日期选择器列。我正在使用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> 这里的问题是日期选择器日历总是隐藏在网格中。就像这样。我怎么才能解决这个问题。
回答 3
Stack Overflow用户
发布于 2020-10-06 20:10:01
像这样添加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>Stack Overflow用户
发布于 2020-08-26 21:55:48
这可以通过查看CSS类.ag-root-wrapper的CSS属性overflow来解决。
这个类是在<ag-grid-angular>指令中声明的(参见截图)。
我的解决方案是在包含<ag-grid-angular>指令的组件的css中重写overflow属性。(在这个组件中，我在html中包含了ag-grid )。
// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
overflow: visible;
}下面的Stack Overflow Post帮助我确定了解决方案。
Stack Overflow用户
发布于 2020-09-25 02:26:22
这里的问题是日历弹出窗口正在被容器裁剪。这是使用日期选择器时的常见问题。
要解决这个问题，你需要将popup元素设置为文档正文，对你来说最简单的解决方案是将[appendTo]="'body'"添加到你的日历组件中，这是一个存在于primeng-calendar的API上的属性。
有关实现的更多详细信息，请参阅此博客，因为其中有一个使用primeng和ag-grid与angular：https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body的示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63301593
复制相关文章
相似问题
腾讯云开发者
