时间戳

首页 > 解决方案 > 选项卡中包含的卡片内容上的角度材质滚动条

html - 选项卡中包含的卡片内容上的角度材质滚动条

问题描述

请帮助解决我在设置角形材料标签时遇到的问题。

请参阅： https ://stackblitz.com/edit/angular-6-material-tab-problem?file= app/tab.component.html [编辑：在进行我在我的回答]

第一个选项卡接近我想要的方式：

  1. 当 mat-card-content 中的内容超出选项卡中的可见空间时，溢出-y 滚动条可用。
  2. mat-card 或 mat-tab 上没有滚动条应该能够适当地调整大小。
  3. 例如，在调整窗口大小时，mat-tab-group 的高度可能会变高——如果需要，mat-card-content 也应该变高并且可以滚动。

在此处输入图像描述

但是，当 mat-card-content 中的内容长度不超过选项卡的高度时，就会出现问题。

例如，虽然样式相同，但第二个选项卡不正确。mat-card 的红色矩形应填充 mat-tab 的高度。最右边还有一个不需要的滚动条。

在此处输入图像描述

这是模板：

<mat-tab-group>
  <mat-tab label="Properties">
    <mat-card class="scrollable-content">
      <mat-card-header>
          <mat-card-title>Card Data</mat-card-title>
      </mat-card-header>
      <mat-card-content>
          My Content for this card...<br>
          0 Lots and lots of content.<br>
          1 Lots and lots of content.<br>
          2 Lots and lots of content.<br>
          3 Lots and lots of content.<br>
          4 Lots and lots of content.<br>
          5 Lots and lots of content.<br>
          6 Lots and lots of content.<br>
          7 Lots and lots of content.<br>
          8 Lots and lots of content.<br>
          9 Lots and lots of content.<br>
          10 Lots and lots of content.<br>
          11 Lots and lots of content.<br>
          12 Lots and lots of content.<br>
          13 Lots and lots of content.<br>
          14 Lots and lots of content.<br>
          15 Lots and lots of content.<br>
          16 Lots and lots of content.<br>
          17 Lots and lots of content.<br>
          18 Lots and lots of content.<br>
          19 Lots and lots of content.<br>
          20 Lots and lots of content.<br>
          21 Lots and lots of content.<br>
          22 Lots and lots of content.<br>
          23 Lots and lots of content.<br>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="2nd Tab">
    <mat-card  class="scrollable-content">
      <mat-card-header>
          <mat-card-title>Other Stuff</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        2nd Tab
      </mat-card-content>
    </mat-card>
  </mat-tab>
</mat-tab-group>

这是CSS：

.mat-card.scrollable-content{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mat-card.scrollable-content mat-card-content {
    overflow-y: auto;
}
.mat-card.scrollable-content mat-card-title {
    display: block;
}

.mat-tab-group {
  height: 400px;
  border: 2px solid #00F;
}

.mat-card-content {
  border: 2px solid #0F0
}
.mat-card-title {
  font-weight: bold;
  font-size: 1.25em !important;
}
.mat-card {
  border: 2px solid #F00;
  height: 85%;
}

.mat-tab-label{
  font-weight: bold;
  font-size: 1.25em;
}

标签： htmlcssangular-materialscrollbar

解决方案

在意识到模板中使用的材料设计元素被预处理到其他 css 类之后，我能够解决这个问题。

我通过将以下内容添加到 css 中使其工作：

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

.mat-tab-body-wrapper {
  height: 100% !important;
}

推荐阅读