Blazorise: Cards in a CardGroup have inconsistent borders

Created on 13 Jul 2020  路  7Comments  路  Source: stsrki/Blazorise

Second and subsequent Cards in a CardGroup are missing the left border in a desktop browser (Chrome) window.

To Reproduce
Steps to reproduce the behavior:

  1. Create a CardGroup with more than one Card.
  2. View the page in the Chrome browser on a desktop.
  3. Note that the first Card has style:
    border-left-color: rgba(0, 0, 0, 0.125; border-left-style: solid; border-left-width: 1px;
    and all the other Cards have style:
    border-left-color: rgb(33, 37, 41); border-left-style: none; border-left-width: 0px;

Expected behavior
All Cards in the CardGroup should show the same left border.

All 7 comments

What provider are you using?

Bootstrap. Sorry, I should have mentioned that initially.

I cannot reproduce the issues. Are you sure you don't have some custom css in site.css or somewhere else?

I know I didn't add any CSS, and I don't think I installed any packages that would have made changes there. I'll set up a small project to test, and either close this case if it works, or post a link if I can reproduce it there.

Sorry, I see the problem. I forgot I had Margin="Margin.Is1.OnX" set on my cards. Without that, the cards butt up against each other, and the right border of the card on the left covers the (missing) left border of the card on the right.

Minimal demo: https://github.com/aherbage/CardGroupTest

CardGroups are designed to be joined together, so it appears like a single element.

If you are wanting them to not be joined, I would recommend checking out CardDeck (documentation here).

Or if you prefer more detailed control over your spacing and responsiveness, you can use a combination of Row/Column and Card elements using the Row.Gutter (documentation of here).
_Note:_ in the linked documentation example, you would place your cards where the Alerts are.

Got it, thanks. I had seen the CardDeck before, but forgot all about it.

Closing, as this isn't a legitimate issue. Thanks again for the help, and sorry for taking your time.

Was this page helpful?
0 / 5 - 0 ratings