MDB Card Full Height


Topic: MDB Card Full Height

dojo44 pro premium asked 11 months ago

Entire card, top to bottom fill screen in SPA application.

Right now the component containing the cards seem to have a large border top and bottom. I would like it if the graphic were flush to the section above the cards. Also getting rid of the top arrow in my case would be great.

Resources (screenshots, code snippets etc.)


Bartosz Termena staff commented 11 months ago

Dear @dojo44

Could you show me your html?

Best, Bartosz.


dojo44 pro premium commented 11 months ago

<mdb-carousel [animation]="'slide'" [ngSwitch]="carouselDisplayMode" [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'">
    <ng-container *ngSwitchCase="'single'">
        <mdb-carousel-item *ngFor="let card of cards">
            <mdb-card class="my-1">
                <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
                <mdb-card-body>
                    <mdb-card-title>
                        <h4> {{ card.title }}</h4>
                    </mdb-card-title>
                    <p>{{ card.description }}</p>
                    <!--                        <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>-->
                </mdb-card-body>
            </mdb-card>
        </mdb-carousel-item>
    </ng-container>

    <ng-container *ngSwitchCase="'multiple'">
        <mdb-carousel-item *ngFor="let item of slides; let i = index">
            <div class="card-group">
                <mdb-card *ngFor="let card of item; let cardIndex = index">
                    <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
                    <mdb-card-body>
                        <mdb-card-title>
                            <h4>{{card.title}}</h4>
                        </mdb-card-title>
                        <p>{{card.description}}</p>
                    </mdb-card-body>
                </mdb-card>
            </div>

--> --> --> --> --> {{card.title}}--> --> {{card.description}}

--> {{card.buttonText}}–>--> --> --> -->


Bartosz Termena staff answered 11 months ago

Hi!

Perhaps you mean something like Full page image carousel?

Check this out:

https://mdbootstrap.com/docs/angular/advanced/carousel/

and search for Full page image carousel

If that's not what you mean, try this:

styles.scss:

  //getting rid of the top arrows
 .controls-top {
   display: none;
 }
  //Images in Bootstrap are made responsive 
  //with .img-fluid. max-width: 100%; and height: auto; 
  //are applied to the image so that it scales with the parent element.
  //Try to set height manually
 .img-fluid {
   height: 75vh;
   width: auto;
 }
  //removing paddings
 .card-body {
   padding-top: 0.2rem;
   padding-bottom: 0;
 }

And here is my html example:

<mdb-carousel
  [animation]="'slide'"
  [isControls]="true"
  class="carousel-multi-item multi-animation"
  [type]="'carousel-multi-item'"
  ><ng-container>
    <mdb-carousel-item>
      <mdb-card class="my-1">
        <mdb-card-img
          src="https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-Beautiful-Full-HD-Images-PIC-WPE0011754.jpg"
          alt="Card image cap"
        ></mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>title</h4>
          </mdb-card-title>
          <p>description</p>
          <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Button</a>
        </mdb-card-body>
      </mdb-card>
    </mdb-carousel-item>
  </ng-container>
  <ng-container>
    <mdb-carousel-item>
      <mdb-card class="my-1">
        <mdb-card-img
          src="https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-Full-HD-1920x1080-Nature-Wallpapers-PIC-WPE0012781.jpg"
          alt="Card image cap"
        ></mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>title</h4>
          </mdb-card-title>
          <p>description</p>
          <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Button</a>
        </mdb-card-body>
      </mdb-card>
    </mdb-carousel-item>
  </ng-container>
</mdb-carousel>

Best, Bartosz.


Please insert min. 20 characters.