SLDS classes on (new) base Lightning web components don't work
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>
lightning-web-components
asked Jan 29 at 15:01
DavidDavid
376
add a comment |
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>
lightning-web-components
asked Jan 29 at 15:01
DavidDavid
376
@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
add a comment |
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>
lightning-web-components
asked Jan 29 at 15:01
DavidDavid
376
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>
lightning-web-components
lightning-web-components
asked Jan 29 at 15:01
DavidDavid
376
asked Jan 29 at 15:01
DavidDavid
376
edited Jan 29 at 15:19
David
asked Jan 29 at 15:01
DavidDavid
376
asked Jan 29 at 15:01
DavidDavid
376
asked Jan 29 at 15:01
DavidDavid
376
376
@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
add a comment |
@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
@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
@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
add a comment |
1 Answer
1
active
oldest
votes
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;
}
answered Jan 29 at 17:31
pmdartuspmdartus
1514
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f248359%2fslds-classes-on-new-base-lightning-web-components-dont-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
}
answered Jan 29 at 17:31
pmdartuspmdartus
1514
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
add a comment |
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;
}
answered Jan 29 at 17:31
pmdartuspmdartus
1514
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
add a comment |
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;
}
answered Jan 29 at 17:31
pmdartuspmdartus
1514
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;
}
answered Jan 29 at 17:31
pmdartuspmdartus
1514
answered Jan 29 at 17:31
pmdartuspmdartus
1514
answered Jan 29 at 17:31
pmdartuspmdartus
1514
answered Jan 29 at 17:31
pmdartuspmdartus
1514
1514
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
add a comment |
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
1
1
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
Perfect. That makes sense. I will not avoid comments like 'Thanks', so Thanks!
– David
Jan 29 at 19:05
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f248359%2fslds-classes-on-new-base-lightning-web-components-dont-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
@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