MDB Card full height of screen

Topic: MDB Card full height of screen

tommykjensen free asked 4 years ago

I would like the mdb-card to fill the entire height of the screen and not use fixed size in pixels. How do I best do that?

Konrad Stępień staff commented 4 years ago

Hi @tommykjensen,

Can you send me part of your code?

Did you try set styles for this component something like this?

mdb-card {
  height: 100%
}

height: 100vh

tommykjensen free commented 4 years ago

Yes I tried these. 100% has no effect. 100vh extends the card beyond the screen height and I get a scrollbar which is not my intent.

Konrad Stępień staff commented 4 years ago

@tommykjensen please send me your code to reproduce the problem.

pabloabl premium commented 3 years ago

Were you able to solve the problem? that happens to me too.

Thanks. Best regards. Pablo.

Add comment

Wymac_ICT priority answered 3 years ago

0 0 Best answer

I am using the layout from ng-admin-pro project and I cant set the mdb card height to 100% on the new component that I create. Can you please help me with which parent component is causing the issue.

Grzegorz Bujański staff commented 3 years ago

Provide the code for which it does not work for you.

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

1 0 Best answer

<p>The card will have 100% height if its container, please try to set 100% height on parent elements and body as well:</p>

<pre class="prettyprint"><code><div class="container h-100">
  <div class="row h-100">
    <div class="col-md-6">
      <mdb-card class="h-100">
        
        <mdb-card-img
          src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"
          alt="Card image cap"
        ></mdb-card-img>
        
        <mdb-card-body>
          
          <mdb-card-title>
            <h4>Card Title</h4>
          </mdb-card-title>

<mdb-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </mdb-card-text>

<a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>
</code></pre>

<p>In <code>style.scss</code>:</p>

<pre class="prettyprint"><code>html, body {
  height: 100%;
}
</code></pre>

Please insert min. 20 characters.

The card will have 100% height if its container, please try to set 100% height on parent elements and body as well:

<div class="container h-100">
  <div class="row h-100">
    <div class="col-md-6">
      <mdb-card class="h-100">
        <!--Card image-->
        <mdb-card-img
          src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"
          alt="Card image cap"
        ></mdb-card-img>
        <!--Card content-->
        <mdb-card-body>
          <!--Title-->
          <mdb-card-title>
            <h4>Card Title</h4>
          </mdb-card-title>

          <!--Text-->
          <mdb-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </mdb-card-text>

          <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

In style.scss:

html, body {
  height: 100%;
}

Kumagai free commented 3 years ago

I was helped by your advise! Thank you!!

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.8.1
Device: pc
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

tommykjensen

150Support score
12Questions 8Answers 0Snippets