Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Set mdb-card max height then add a scrollbar

1001albertpadilla free 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


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 free commented 5 years ago

The solution works! I used the inline approach. Thanks!


Konrad Stępień staff answered 5 years ago


Hi @1001albertpadilla,

Can you try to use overflow: scroll property?


1001albertpadilla free 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.



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

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