AngularMaterialDesign不能在所有选项卡中显示Plotly可视化，只有第一个选项卡可以显示。 _编程开发

AngularMaterialDesign不能在所有选项卡中显示Plotly可视化，只有第一个选项卡可以显示。

创始人

2024-10-28 09:02:52

0次

问题通常出现在使用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:日期时间值不正确

AngularMaterialDesign不能在所有选项卡中显示Plotly可视化，只有第一个选项卡可以显示。

相关内容

热门资讯