Angular Material 2带tabs的modal dialog无故出现滚动条求助

我刚梳理了你的问题——Angular Material Dialog里加了Tabs后莫名出现垂直和水平滚动条，这在Material组件里其实挺常见的，大概率是默认样式的内边距、内容溢出或者布局冲突导致的，给你几个实用的解决办法：

• 调整Dialog容器的默认样式
  Angular Material Dialog的容器默认带有内边距，有时候会和Tabs的布局叠加导致内容溢出。你可以在对话框组件的CSS文件里添加以下样式来覆盖：

  .mat-dialog-container {
    padding: 0 !important;
    overflow: hidden !important;
  }
  

  padding: 0会去掉容器默认的内边距，overflow: hidden直接隐藏溢出的内容，从根源上避免滚动条出现。如果你的样式优先级足够高（比如用组件的::ng-deep或者全局样式），也可以不用!important。

• 优化Tabs组件的布局样式
  有时候Tabs的头部或内容区自带的外边距也会导致整体高度超出Dialog。可以给Tabs组件添加自定义样式：

  .mat-tab-group {
    margin: 0;
  }
  .mat-tab-body-content {
    overflow: hidden !important;
  }
  

  第一行去掉Tabs的默认外边距，第二行确保Tab的内容区不会出现内部滚动条。

• 通过Dialog配置自定义容器样式
  如果你不想影响全局的Dialog样式，可以在打开Dialog时指定自定义的面板类，针对性调整：

  this.dialog.open(FileNameDialogComponent, {
    width: '600px', // 根据你的需求设置合适宽度
    height: '400px', // 根据你的需求设置合适高度
    panelClass: 'custom-dialog-container'
  });
  

  然后在全局CSS或者组件的CSS里定义这个自定义类：

  .custom-dialog-container .mat-dialog-container {
    padding: 16px; /* 自定义合适的内边距，避免内容太贴边 */
    overflow: hidden;
  }
  

如果试了上面的方法还是有滚动条，可以检查一下Tab内容里的元素——比如有没有设置固定高度的图片、超长文本或者嵌套容器超出了Dialog的范围，针对性调整这些元素的尺寸就行。

内容的提问来源于stack exchange，提问作者ark