This repository was archived by the owner on Sep 26, 2020. It is now read-only.
Not able to set height of material carousel. #61
Description
I am using material carousel and trying to set it's height , I tried slideheight, proportion but not able to fix height . Maybe i'm missing something. Please help .
My code is:
<mat-carousel
timings="500ms ease-in"
[autoplay]="true"
interval="5000"
color="accent"
maxWidth="auto"
slides="2"
slideHeight="50vh"
[loop]="true"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"
<mat-carousel-slide #matCarouselSlide>
<div class="row">
<div class="col-3">
<div class="url-card"> <a href="health-details.html">
<div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
<div class="url-row">
<div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
<div class="font-normal">Sarvesh Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">IT</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">MUM-Z2</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">1 min, 6 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">Private VIP</div>
</div>
</div>
</a> </div>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-carousel-slide>
<mat-carousel-slide>
<div class="row">
<div class="col-3">
<div class="url-card"> <a href="health-details.html">
<div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
<div class="url-row">
<div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
<div class="font-normal">Sarvesh Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">IT</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">MUM-Z2</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">1 min, 6 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">Private VIP</div>
</div>
</div>
</a> </div>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-carousel-slide>
</mat-carousel>