Topic: How to define a card to take up all the available vertical space?
Can a Card be setup to consume all the available vertical space to the bottom of the viewable area in the browser?
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 free commented 4 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 4 years ago
Hi @davout,
You have any example such a table?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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