10

Playground example https://developer.salesforce.com/docs/component-library/tools/playground/KLHs3GU9

I have a Lightning Web Component template with a lightning-card in an App Page.

<template>
    <lightning-card title="parent"></lightning-card>
</template>

I would like to nest more cards into it to simulate the related list look and feel from standard Lightning experience.

<template>
    <lightning-card title="parent">
        <lightning-card title="child></lightning-card>    
    </lightning-card>
</template>

This renders the child without borders, filling the entire width of the parent.

If I add the slds-card_boundary class to the child, it draws a misplaced vertical border fragment above and below the card.

However, if I add the slds-card_boundary class to the article element spawned by the child lightning-card component, the border is correctly drawn around the entire card. Adding a slds-m-around_small to article element also forces a separation between parent and child cards.

What layout concepts am I missing with Lightning Web Components to be able to successfully use lightning-card components?

In general, how can lightning-cards be used inside Lightning Web Components to achieve a related list-like appearance?

7
  • You'll probably have to roll your own - I think it's how the shadow dom kind of interferes with nested child components and their styles. Nov 27, 2019 at 18:00
  • I mean... there's not much to a card so you can just do this: developer.salesforce.com/docs/component-library/tools/… Nov 27, 2019 at 18:06
  • 1
    Sure, I can just write whatever the card spawns manually, starting from article onwards, but what’s the point in a component library if components do not work?
    – ipavlic
    Nov 27, 2019 at 18:19
  • 1
    If I am getting this right, and that you need a related list experience as you see on desktop, you will need to utilize different lightning-card components here. Is this how you expect this to be rendered?
    – Jayant Das
    Nov 27, 2019 at 18:34
  • @JayantDas That's very close, yes. slds-card seems wrong as it introduces additional padding, but other classes do bring it closer to the experience. Most importantly, is this sort of visual behaviour documented somewhere, or do I just go to standard interfaces and inspect to see what's going on?
    – ipavlic
    Nov 27, 2019 at 18:39

3 Answers 3

8

I've run into the same issue. It appears the styling for <lightning-card> may be broken at this time with LWC. What you can do is simply add a class onto the card and give it a style of display: block.

So in your .html file:

<lightning-card title="parent" class="my-card"></lightning-card>

And in a .css file:

.my-card {
    display: block;
}
3
  • this works for me! Thanks! Sep 28, 2020 at 11:01
  • this solved my issue, thank you
    – sfdxdev
    May 12, 2021 at 14:28
  • Thanks a lot, this solved my issue! Oct 13, 2021 at 15:06
3

Instead of using Lightning Card to achieve this, use Lightning Layout Item & write a Div tag inside it.

Then apply this Class & CSS to it - style:"border: 2px solid rgb(101, 153, 205);" & class="slds box".

1

I ran into the same problem with a nested lightning-card and given that the markup is simple went for HTML with the appropriate classes added so I could place slds-card_boundary where it is needed:

<template for:each={tagsToResources} for:item="t">
    <div key={t.tags} class="slds-card slds-card_boundary slds-m-around_medium">
        <div class="slds-card__header">
            {t.tags}
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <div for:each={t.resources} for:item="r" key={r.id}>
                {r.name}
            </div>
        </div>
    </div>
</template>

I guess this is a case where the component authors haven't allowed the markup the SLDS authors expect to be created.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.