MDB Card Full Height


Topic: MDB Card Full Height

dojo44 asked 5 years 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 5 years ago

Dear @dojo44

Could you show me your html?

Best, Bartosz.


dojo44 commented 5 years 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 5 years 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No