search

gbrlsnchs / material2-carousel

A carousel component for Angular using Material
https://gsr.dev/material2-carousel
MIT License
85 stars 114 forks source link

Not able to set height of material carousel. #61

Open Sakshi94 opened 4 years ago

Sakshi94 commented 4 years ago

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="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>