Как убрать полосу прокрутки с вкладки Mat или Mat-card (Angular Material) - PullRequest
Новая
       43

Как убрать полосу прокрутки с вкладки Mat или Mat-card (Angular Material)

0 голосов
/ 14 декабря 2018

Проблема решена: Просто добавьте 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%;

1 Ответ

0 голосов
/ 15 декабря 2018

Элемент h2 внутри элемента mat-list-item по умолчанию имеет некоторое поле, которое выходит за пределы элемента mat-list и вызывает дополнительную полосу прокрутки.Устранение проблемы путем удаления h2 или переопределения стиля поля на полях: 

<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>
...