Card missing border when included inside tab

[firo]

(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the reduced test case. The lightning-card misses the border only when included in the tab.

here you see an example of the missing border: on top, the same component has boarder (not included in the tab) and below another example of the same component without the border and included in the tab.

my HTML tag is

Describe the issue. Is it a bug or a feature request (new component, new icon, new CSS class)?

Affects existing component that is missing border when the component is included in the tab.

Is this issue related to a specific component, variant, and/or state? If so, please detail which.

lightning:card

Are any specific browsers impacted by this bug?

NA

Which version of the Salesforce Lightning Design System are you using?

Summer '19

What steps and/or code are needed to reproduce this issue?

create card and than place the component in Tabs.

> What did you expect to happen? See the component's borders also when included in the Tab. > What actually happened? the component's border disappears and seeing two vertical lines on top and bottom of the component

[firo]

I noticed the solution could be adding style class to the following tag lightning-card, article, and header. However, article and header tags are automatically rendered.

How can address the style enforcement to articles and header tags?

• lightning-card class="related_list_card_border_top forceRelatedListCardDesktop"
• article class="slds-card_boundary related_list_card_border_top forceRelatedListCardDesktop"
• header class="slds-card__header slds-grid related_list_themed_border_top"

[Dottenpixel]

Thanks for your post @firo! Is there a code snippet you could share that would help us troubleshoot?

[Dottenpixel]

@firo Although I don't see it specifically speaking to tabs, in the Lightning Design System CSS there is a declaration in there to purposefully remove the Card border and drop shadow inside a tab content. In effect, it takes on the styling of a Nested Card. If you would like to retain the border and shadow, apply the slds-card_boundary class to your slds-card.

We will look to add documentations speaking to Cards in Tabs

I'm still curious as to why you have those remnant vertical lines on top and bottom, so please send a code snippet or steps to reproduce if you can.

Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. If you still need help with your issue, please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System.

[sdieryck]

Hello I have the same problem as firo. And when I apply the slds-card_boundary class some strange lines appear (you can see them on the left side of the joined picture) and the proper lines are still invisible. The modal window inside has the same problem.

Here is a code snippet to reproduce the problem. One step to reproduce the problem is to use it inside a tab as the same code works great outside of tabs.

Should I open a new issue for this as this one is closed ? @Dottenpixel

[Damecek]

Hi guys the slds-card_boundary fix still does not work with card inside a tab.

Edit: nevermind i found this stackexchange where it is solved by adding the slds-card_boundary class and display: block.

[chrisabralse]

This fix no longer works and the docs do not explain how any variant might allow this to work.

We should be able to specify a lightning-card element and control whether it displays with a border or not without having to reimplement the card.