Why am I facing an SLDS card margin issue?

454    Asked by ClareMatthews in Salesforce , Asked on May 18, 2023

When lightning cards render, the first one seems to always be misaligned at the top no matter what. (this is obviously fixable with CSS). I used dynamic rendering, standard lightning:Card component and SLDS card blueprints, all resulted in the same behaviour.

dynamic lightning card:

component.cmp

{!v.body}

componentController.js

doInit : function(cmp, evt, helper) { const featureCards = cmp.get('v.newFeatures'); featureCards.forEach( function(element){ helper.createComponent(cmp, evt, element); }) },

componentHelper.js

createComponent : function(cmp, evt, data) { $A.createComponent( "c:newFeatureCard", { "title": data.component.label, "cardBody": data.component.description }, function(newCard, status, errorMessage){ //Add the new button to the body array if (status === "SUCCESS") { var body = cmp.get("v.body"); body.push(newCard); cmp.set("v.body", body); } else if (status === "INCOMPLETE") { console.log("No response from server or client is offline.") // Show offline error } else if (status === "ERROR") { console.log("Error: " + errorMessage); // Show error message } } ); },

lightning:card component:

component.cmp

Non Dynamic Cards
asdasd Card Body (custom component) asdasd Card Body (custom component) asdasd Card Body (custom component) asdasdasd Card Body (custom component) asdsad Card Body (custom component) asdasdsda Card Body (custom component)

SLDS Card Blueprint:

component.cmp

SLDS BluePrint Cards

Can someone shed some light as to the origin of this behaviour and how to fix it? (Is this something that should be raised with Salesforce support? - easy css fix, just throwing this out there for the community)

the same behaviour results if I don't wrap the cards in a grid

The slds cards should be in their own layout boxes (instead of being the layout boxes), and should not be floating. Elements that restrict size changes (e.g. slds-size_1-of-3) should be wrapped around whatever it is you're trying to size. Most of the time it doesn't matter, but it helps to get in the habit of doing so, and doing so means using lightning:layoutItem.

Here's a self-contained demonstration using your non-dynamic card example (note: I converted this to an iteration for brevity, it still works "the long way around"):
Non Dynamic Cards Card {!item} Card Body (custom component)

Your Answer

Interviews

Parent Categories