Skip to content
This repository has been archived by the owner on Sep 26, 2020. It is now read-only.

Not able to set height of material carousel. #61

Open
Sakshi94 opened this issue Apr 13, 2020 · 0 comments
Open

Not able to set height of material carousel. #61

Sakshi94 opened this issue Apr 13, 2020 · 0 comments

Comments

@Sakshi94
Copy link

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>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Sakshi94