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!

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Vertical Scrolling Card with equal length

md pro asked 5 years ago

Expected behavior I want to have a row of two bootstrap cards.

Both cards are the same height, but one card is very long and filled with a dynamic length list. I want this very long card's overflow to be scrolling, and match the height of the shorter card.

How can I get this long card to scroll?

Actual behavior I am unable to get functioning scrollbars to appear on the content or card.

Resources (screenshots, code snippets etc.) You can see my plain bootstrap code here to illustrate the problem in desktop. https://stackoverflow.com/questions/55162471/scrolling-card-in-bootstrap

Thank you for any help! It seems like this would be a common problem but I can't find any resources on scrolling cards. :)

md pro answered 5 years ago

I was able to solve this by adding a bootstrap utility class 'h-100' on the following line,

<div class="position-absolute all-0 d-flex flex-column w-100 h-100">

Marta Wierzbicka staff commented 5 years ago

Hi, That's great.

Marta Wierzbicka staff answered 5 years ago

Hi,

for now, we don't have a better solution for this issue, we will think about how to handle this in MDB package. Maybe here you will find an answer right for you.

Best, Marta

Marta Wierzbicka staff answered 5 years ago

Hi,

something like this is fine for you: https://mdbootstrap.com/snippets/jquery/marta-szymanska/481924?view=standard?

Best, Marta

md pro commented 5 years ago

That's got me going in the right direction. I'd still like to get it so I don't have to specify a height in pixels, and it just matches the size of the image card on the right. Specifying a percent instead of pixels doesn't seem to do it either.

Thank you Marta!

Marta Wierzbicka staff answered 5 years ago

Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? I'll try to help you.

Best, Marta

md pro commented 5 years ago

Sure Marta, Thank you for your attention.

https://mdbootstrap.com/snippets/jquery/denninger/478491

You will see two cards. I would like the right card to contain a list that is full width, and also equal in size to the left card. Any excess

  • elements should be contained in the card, so the card is scrollable to allow this.

    This is the only way I can come up with achieving this requirement.

    •
    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

    Answered

    Specification of the issue
    • ForumUser: Pro
    • Premium support: No
    • Technology: General Bootstrap questions
    • MDB Version: -
    • Device: Desktop
    • Browser: Chrome
    • OS: Windows
    • Provided sample code: No
    • Provided link: Yes
    Tags
    cards scroll
    About author
    md
    Pro User 20Support score
    2Questions 1Answers 1Snippets