MDB Card Full Height

Topic: MDB Card Full Height

dojo44 free 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 free 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}}–>--> --> --> -->

<p></p>

<pre class="prettyprint"><code><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>
                    
                </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>
</code></pre>

<p>-->
-->
-->
-->
-->
{{card.title}}-->
-->
{{card.description}}</p>-->
{{card.buttonText}}–>-->
-->
-->
-->
            
        
    
<p></p>

Please insert min. 15 characters.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Perhaps you mean something like <strong>Full page image carousel</strong>? </p>

<p>Check this out: </p>

<p><a href="https://mdbootstrap.com/docs/angular/advanced/carousel/" target="_blank">https://mdbootstrap.com/docs/angular/advanced/carousel/</a></p>

<p>and search for <em>Full page image carousel</em></p>

<p><strong>styles.scss:</strong></p>

<pre class="prettyprint"><code>  //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;
 }
</code></pre>

<p>And here is my <strong>html</strong> example:</p>

<pre class="prettyprint"><code><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>
</code></pre>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

dojo44

80Support score
14Questions 1Answers 0Snippets