如何从Mat-tab或Mat-card（角度材质）中删除滚动条

时间：2018-12-14 11:14:08

标签： angular flexbox angular-material angular5 angular-material2

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

我目前有一张卡片(mat-card)，里面有2个标签（现在您只能看到一个标签，但想法是要解决此问题以添加另一个标签；该卡片将具有相同的内容，但将一个示例，因为目前仅是Lorem Ipsum文本），我不知道怎么做的是删除滚动条，并且内容一直在向下拉动卡片

Scrollbar issue 我正在使用Angular 5，当然也使用Angular Material 5。

我尝试了一些通过Google和StackOverflow找到的东西，但没有一个对我有用。我正在将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%;

5 个答案:

答案 0 :(得分：0)

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

TABLE (with rows): genre:

或

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

答案 1 :(得分：0)

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

尝试这样：

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

答案 2 :(得分：0)

添加overflow:hidden; 会正常工作

答案 3 :(得分：0)

OP对此answer的评论：

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

答案 4 :(得分：0)

我尝试过，对我有用。

.mat-tab-body-content { overflow: hidden!important}
相关问题
最新问题