问题通常出现在使用MatTabs组件时。这是因为MatTabs隐藏不活动的选项卡,无法正确计算它们的大小,进而导致Plotly图表的大小计算错误。要解决问题,可以使用CSS样式手动显示所有选项卡,如下所示:
.tab-content{ display: block !important; height: 0; overflow: hidden; visibility: hidden; } .mat-tab-body-wrapper{ transform: none !important; } .mat-tab-body{ overflow: auto; }
代码示例:
在组件的CSS文件中添加相关样式:
::ng-deep .tab-content{ display: block !important; height: 0; overflow: hidden; visibility: hidden; } ::ng-deep .mat-tab-body-wrapper{ transform: none !important; } ::ng-deep .mat-tab-body{ overflow: auto; }
然后,将Plotly图表放在MatTabGroup的选项卡中,如下所示:
上一篇:AngularMaterial的Sidenav切换动画不能正确隐藏/显示
下一篇:AngularMaterialDesignDatepicker导致错误:ER_TRUNCATED_WRONG_VALUE:日期时间值不正确