Grid-view - same card height

Gesture enabled responsive lists
1

Is there a way to have all the card at the same hieght on a row? E.g. In ‘animal’ Grid view demom the Japanese Spider Crab card is taller than the other on the row. I’m getting the same result. What I would like to have is tat all the cards on the same row have the same height (based on the tallest one).

2

Hi Dominic,

You can set a min-height for your cards, based on the tallest one. Ex:

.mbsc-card.mbsc-form {
    min-height: 400px;
}
3

This is good when you know the size of the tallest one, but when the data is dynamic I didn’t find the way to do it.

4

Good point! In that case, you can go with the flex display on the columns:

.mbsc-grid .mbsc-col-12 {
    display: flex;
}
5

great, the height is not the same for all cards. One last question, How can I expand the mobiscroll-card-content section instead of having all the extra space at the end (after the footer). Adding flex-grow doesn’t seem to work…probably becuase each section is display as a block.

6

nevermind, I got it! Thank you