Cards are not equal height
rosslaird opened this issue · 3 comments
In card grid decks and related page decks, the cards are not equal height (unless the line breaks happen to line up). See the attached example showing the bottom borders of a row of related pages.
Applying .h-100 to each card, or $card-height: 100% in Sass (as per Bootstrap docs) will render the cards in equal height. The card grid decks allow for this via adding h-100 to the custom CSS field, but the related page cards do not offer that option.
I think most users would want the related page cards to be of equal height as well as the cards of regular card decks. This could be achieved globally by adding $card-height: 100%; to the SCSS (this is what I will do for now, in my own project). I would volunteer to create a pull request for this, but I'm not sure you want a global solution for all cards (as I do), and I'm not sure where you'd want the code to be (in custom.scss?).
Another option would be to specify .h-100 in the template just for related pages, or to add the custom CSS option to related pages.
Actually, it looks like $card-height: 100%; does not actually result in equal-height cards in all situations. I'm not sure what's causing this inconsistency.
I think adding .h-100 by default to our new miniview templates card would be the ideal result. I'm not sure if that will cause issues when the miniview is singular (i.e. the Page Preview block). This h-100 method does require the card to have a footer I believe, so the "Read more" link might need to be moved to a card footer, which would be fine.
https://getbootstrap.com/docs/5.2/components/card/#grid-cards
In the first example of equal height cards in the Bootstrap docs (same link as above), the cards do not have footers (see screenshot). In the second example they do. So, I'm not sure if the footer is actually required to make the cards equal height.
It does not seem that CRX is using the .row-cols-* classes shown in the Bootstrap docs (at least, these classes do not appear in the source code for related pages and latest pages on my site, I couldn't find the string row-cols anywhere in the repo, and I did not see anything involving these classes after looking at every example of the term row in the repo). As these classes are shown in every card example in the docs (equal height or otherwise), I wonder if this might be related to the issue at hand?
("Latest Pages" is another place this issue shows up.)
