1

SLDS classes on base Lightning web components do not appear to work... unless I'm missing something?

When I view the component below, the margin is properly applied to the div, but not to the card.

Am I missing something?

Thanks very much!

UPDATE: Trying slds-m-around_large seems to add an arbitrary (and entirely incorrect) amount of margin. It also doesn't even add on the sides, only top & bottom.. not that I want on the sides in this case.

UPDATE 2: I witness the same (incorrect?) thing in the Web Components Playground. But that can't be the expected behavior, can it?

<template>
    <div class="slds-m-bottom_large">
        div
    </div>

    <lightning-card class="slds-m-bottom_large">
         card 1
    </lightning-card>

    <lightning-card>
        card 2
    </lightning-card>
</template>

screenshot

  • @vignesh Can you please share where you see this documentation? In the component library under lightning-card, I see: Use the variant or class attributes to customize the styling. – David Jan 29 at 15:58
6

By default, custom elements are set to display: inline. By introspecting the DOM in the playground, you can also see that the lightning-card doesn't override the display property from inside using the :host selector. The margin and padding are not being applied because the lightning-card element is display: inline.

In order to get the margin and padding working as you expect you will need to set the lightning-card display CSS property to block. playground

lightning-card {
    display: block;
}
  • 1
    Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks! – David Jan 29 at 19:05

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.