How to define a card to take up all the available vertical s


Topic: How to define a card to take up all the available vertical space?

davout asked 5 years ago

Can a Card be setup to consume all the available vertical space to the bottom of the viewable area in the browser?


Konrad Stępień staff answered 5 years ago

Hi @davout,

something like that?

<div class="col-md-4 m-5 position-relative" [ngClass]="'d-md-block'" style="min-height: 100vh;">
  <mdb-card class="h-100 position-absolute">
    <!--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>

Please provide me with your code if you still have a problem.

Best, Konrad.


davout commented 5 years ago

I am copying the example at... https://ng-admin-pro.mdbootstrap.com/tables/table2

How can this be changed so that data table takes up all the available vertical space? I'd like the pagination control to be positioned relative the bottom of the available space, and the area between the column titles and the pagination row to flex Also with this type of pagination, how the number of rows that are displayed be determined?


Konrad Stępień staff commented 5 years ago

Hi @davout,

You have any example such a table?


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