1

It might sound like a silly question but I came across something while creating a Lightning component. Please have a look into my component and help me clear my doubts that is mentioned below.

Below is my component code:-

<aura:component controller="ContactListController">
    <aura:attribute name="contactList" type="list"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
    <div class="slds-p-around_medium">
    <aura:iteration items="{!v.contactList}" var="singleContact">
        <lightning:card footer="{!singleContact.Phone}" title="{!singleContact.Name}" 
                        iconName="standard:contact_list">
            <b>First Name</b> : {!singleContact.FirstName}<br></br>
            <b>Last Name</b> : {!singleContact.LastName}<br></br>
            <b>Email</b> : {!singleContact.Email}
        </lightning:card>   
    </aura:iteration>
    </div>
</aura:component>

Now if you see in the above code, I have put the <div> tag for padding outside the <aura:iteration> and I get the result like this:-

Less Spacing

As you can see there is less spacing between two lightning cards.But when i put my <div> tag inside the <aura:iteration> then there is more space between the lightning cards.

More Spacing

I am not able to get why this is happening so?

Thanks in Advance, Ali

3

If you want some space left between the cards, you can use margin class like added below(depending on your need either you can make it less or more) -

For doing less(try this ) - slds-m-top-xxx-small For doing More(try this ) - slds-m-top-x-small or slds-m-top-small or slds-m-top-medium

<aura:component controller="ContactListController">
    <aura:attribute name="contactList" type="list"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
    <div class="slds-p-around_medium">
    <aura:iteration items="{!v.contactList}" var="singleContact">
        <lightning:card footer="{!singleContact.Phone}" title="{!singleContact.Name}" 
                        iconName="standard:contact_list" class="slds-m-top_xx-small" >
            <b>First Name</b> : {!singleContact.FirstName}<br></br>
            <b>Last Name</b> : {!singleContact.LastName}<br></br>
            <b>Email</b> : {!singleContact.Email}
        </lightning:card>   
    </aura:iteration>
    </div>
</aura:component>
| improve this answer | |
0

Below is my understanding :-

It's because of the CSS class slds-p-around_medium. This adds padding around the div. If that div is inside the iteration, the padding repeats itself. If it's outside the iteration, I only get one padded div.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.