Vertical Scrolling Card with equal length


Topic: Vertical Scrolling Card with equal length

md pro asked a year 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. :)


Marta Szymanska staff pro premium answered a year 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 a year 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.


  • Marta Szymanska staff pro premium answered a year ago

    Hi,

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

    Best, Marta


    md pro commented a year 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 Szymanska staff pro premium answered a year 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


    md pro answered a year 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 Szymanska staff pro premium commented a year ago

    Hi, That's great.


    Please insert min. 20 characters.
    Status

    Answered

    Specification of the issue
    • User: Pro
    • Premium support: No
    • Technology: General Bootstrap questions
    • MDB Version: -
    • Device: Desktop
    • Browser: Chrome
    • OS: Windows
    • Provided sample code: No
    • Provided link: Yes
    Tags