Рост не увеличивается с мат-картой - PullRequest
Новая
       33

Рост не увеличивается с мат-картой

0 голосов
/ 05 августа 2020

У меня проблема с мат-картой на моей веб-странице. Проблема в том, что нижняя часть мат-карты выглядит обрезанной внизу веб-страницы. Я считаю, что это вызвано тем, что высота веб-страницы не расширяется для размещения мат-карты. Выглядит так: enter image description here

enter image description here

The code is as follows:

HTML for Products View Component

 Продукты

S CSS для компонента просмотра продуктов 

html,
 body {
 height: 100%;
 }

.view{
  .row{
    margin-left: 2vw;
    margin-top: 4vh;
  }

  app-view-product-card{
    width: 25vw;
    height: 70vh;
  }
}


mat-button-toggle-group {
  margin-left: 8vw;
}

HTML для карты продукта Компонент 

<mat-card class="productCard" appMaterialElevation defaultElevation="2" raisedElevation="16">
  <mat-card-header>
    <ngx-avatar mat-card-avatar class="my-avatar" src={{product.authorProfile}} *ngIf="product.authorProfile != ''" class="avatar-header" size="40"> </ngx-avatar>
    <mat-card-title>{{product.title}}</mat-card-title>
    <mat-card-subtitle>{{product.author}}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image [src]="product.imageLinks ? product.imageLinks[0] : null" alt="Photo" class="cardImage">
</mat-card>

S CSS для компонента карты продукта 

.productCard{
  height: 68%;
  margin-left: 2rem;
  margin-right: 2rem;
  min-width: 20%;


  .cardImage{
    width: 100%;
    height: 35vh;
    margin:auto;
  }
}

.productTile{
  display: flex;
}
...