Why am I facing an SLDS card margin issue?
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
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)