Set mdb-card max height then add a scrollbar

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Set mdb-card max height then add a scrollbar

1001albertpadilla asked 5 years ago

For mdb-card, how do I set max height for the mdb-card-body then add a scrollbar so the content won't overflow. Here's the code I have and the corresponding screenshot.

mdb-card mdb-card-body style="max-width: 20rem; max-height: 10rem; min-height: 10rem;"

enter image description here

Konrad Stępień staff answered 5 years ago

Hi @1001albertpadilla,

Can you try to use overflow: scroll property?

1001albertpadilla commented 5 years ago

I'm not sure if I'm doing it right. I tried both of these and both didn't work.

mdb-card overflow="scroll"> mdb-card-body overflow="scroll">

Kindly help. Thanks.

Arkadiusz Idzikowski staff answered 5 years ago

I just checked that again and adding max-height and overflow: scroll works correctly. You need to add this styles to your styles.scss file:

mdb-card-body {
    max-height: 100px;
    overflow-y: scroll;
}

or inline:

<mdb-card-body style="max-height: 100px; overflow-y: scroll">

1001albertpadilla commented 5 years ago

The solution works! I used the inline approach. Thanks!
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.3
  • Device: Laptop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags
+mdb-card-max-height
About author
1001albertpadilla
214Support score
35Questions 4Answers
0Snippets likes 0Snippets