About this question
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
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
SLDS Card Blueprint:
component.cmp
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
