如何从 Mat-tab 或 Mat-card (Angular Material) 中删除滚动条

Posted 2023-03-07

【中文标题】如何从 Mat-tab 或 Mat-card (Angular Material) 中删除滚动条

【英文标题】：How to remove scrollbar from Mat-tab or Mat-card (Angular Material)

【发布时间】：2019-05-15 15:54:21

【问题描述】：

问题已解决：只需将dynamicHeight 添加到<mat-tab-group>

我目前有一张卡片 (mat-card)，里面有 2 个选项卡（现在你只看到一个选项卡，但我的想法是解决这个问题以添加另一个选项卡；它将具有相同的内容，但将作为示例因为它目前只是 Lorem Ipsum 文本），我不知道该怎么做是删除滚动条并且内容只是不断地向下延伸卡片。

我正在使用 Angular 5，当然还有 Angular Material 5。

我尝试了几件通过 Google 和 *** 找到的东西，但没有一个对我有用。我将 Flexbox 用于网格系统。

我的 lorem.component.html 代码：

<div class="content-padder content-background">
  <div class="uk-section-small uk-section-default header">
    <div class="uk-container uk-container-large uk-animation-slide-top-medium">
      <h1><span uk-icon="credit-card"></span> Lorem</h1>

      <p>Lorem</p>
      <ul class="uk-breadcrumb">
        <li><a href="#">Lorem</a></li>
        <li><span href="">Lorem</span></li>
        <li><span href="">Lorem</span></li>
      </ul>
    </div>
  </div>
  <div class="uk-section-small content-padder content-background">
    <div class="container">
      <mat-card>
          <div class="mat-tab-fix">
            <mat-tab-group>
                <mat-tab class="tabs" label="Tab 1">

                        <h2 style="padding-top: 30px;">
                            <span>Lorem</span>
                          </h2>

          <div class="card-layout">
            <div class="card-column-1">

              <mat-form-field hideRequiredMarker>
                  <input matInput placeholder="Importe Recarga" required/>
                  <mat-hint align="start" matTooltip="Ingresa el importe a recargar"><p>+ Info</p></mat-hint>
                </mat-form-field>

                <mat-form-field>
                  <mat-select placeholder="Lorem">
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                  </mat-select>
                  <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                </mat-form-field>

                <mat-form-field hideRequiredMarker>
                  <input matInput placeholder="Lorem" required/>
                  <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                </mat-form-field>

            </div>

            <div class="card-column-2">
                  <mat-form-field>
                      <mat-select placeholder="Lorem Canal">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Selecciona el Lorem"><p>+ Info</p></mat-hint>
                    </mat-form-field>

                    <mat-form-field>
                      <mat-select placeholder="Lorem">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Lorem">+<p>+ Info</p></mat-hint>
                    </mat-form-field>

                    <mat-form-field>
                      <mat-select placeholder="Lorem">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Selecciona el tipo de operativa"><p>+ Info</p></mat-hint>
                    </mat-form-field>
            </div>

            <div class="card-column-3">
                <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>

                  <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>

                  <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>
                  <div class="button-row"></div>

                  <button mat-raised-button end color="primary" matTooltip="Lorem">
                      Lorem
                  </button>
            </div>
          </div>

          <mat-list>
              <mat-list-item> <h2>Lorem</h2></mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>

          </mat-tab>
        </mat-tab-group>
        </div>

          </mat-card>
  </div>
</div>

我的 lorem.component.css 代码：

.header 
  padding-top: 3.34vh;
  box-sizing: border-box;
  border-bottom: 1px #e5e5e5 solid;

.content-padder 
  margin-left: 0px;

.content-background 
  min-height: calc(100% - 80px);
  background-color: #F0F0F0;


/* Sizes and distances of Inputs */
.mat-form-field 
  padding-top: 2vh;
  width: 100%;


.button-row 
  padding-top: 3.34vh;


.mat-tab-fix   /* Fix to the tab problem (El scroll subía al clickar en alguna de las tabs) */
  min-height:800px;


/* Flexbox styles for Cards and Columns */

.card-layout 
  max-width: 1000px;
  background-color: #ffffff;
  margin:  auto;
  /* line-height: 1.65; */
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;


.card-column-1 
  flex: 1;
  padding: 10px;

  margin-bottom: 20px;
  flex-basis: 30%;


.card-column-2 
  flex: 1;
  padding: 10px;

  margin-bottom: 20px;
  flex-basis: 30%;


.card-column-3 
  flex: 1;
  padding: 10px;

  margin-bottom: 20px;
  flex-basis: 30%;


/* .box 
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    width:640px;
    text-align:center;
 */

/deep/ .mat-tab-body   /* Removing the scrollbar from the Tabs card */
  overflow-y: hidden !important;


.mat-tab-body-content 
  height: 100%;

【参考方案1】：

根据 OP 对此answer 的评论：

只需将dynamicHeight 添加到mat-tab-group。

<mat-tab-group dynamicHeight></mat-tab-group>

【参考方案2】：

我试过了，它对我有用。

.mat-tab-body-content  overflow: hidden!important

【参考方案3】：

默认情况下，mat-list-item 内的 h2 元素有一些边距，它延伸到 mat-list 元素之外并导致额外的滚动条。删除 h2 或覆盖 margin-bottom 样式将解决问题：

<mat-list>
    <mat-list-item>Lorem</mat-list-item>
    <mat-divider></mat-divider>
</mat-list>

或

<mat-list>
    <mat-list-item><h2 style="margin-bottom: 0;">Lorem</h2></mat-list-item>
    <mat-divider></mat-divider>
</mat-list>

【讨论】：

我去掉了H2，滚动条还是出来了。哪个可能？感谢您的回答！

你是指tab组件内部的滚动条还是整个页面的滚动条？如果是后者，请删除您在 .mat-tab-fix 类上设置的最小高度。

mat-tab-fix 是因为当你点击两个选项卡之一时，自动向上滚动。该课程解决了该问题，无论如何我将其删除，但什么也没发生。我的意思是它是标签组件内的滚动条。

你能发布一个 StackBlitz 或类似的东西吗？我无法复制这个问题，所以解决起来有点困难。或者，您可以尝试从 DOM 中删除元素，直到将其缩小到导致问题的那个——这就是我让它为我工作的方式。

问题已解决。只需将dynamicHeight 添加到mat-tab-group 感谢您的回答！

【参考方案4】：

解决方案非常简单，只需更改一行。您只需要删除容器标签中 y 轴的边距和/或填充。您的容器具有默认边距/填充。

试试这样：

<div class="container pt-0 pb-0 mt-0 mb-0">

【讨论】：

很简单。不需要太多代码。给你的 div 一个类名，它包含你卡片的全部内容或弹出。然后进入 css 文件并为该类赋予样式以在 Y 轴上填充零和边距零。这可以应用于任何地方。如果您还需要代码，请告诉我。