Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

css in lightning component

I have a piece of code inside my lightning component as follows.

 <lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="Provider Details">
            <lightning:accordionSection name="Provider Details" label="Provider Details" >
                <lightning:card title="">
                    <lightning:layout multiplerows="true">
                        <lightning:layoutItem size="5" padding="around-small">
 <div class="left-space"><lightning:formattedText value="10.20 Miles"/></div>

  </lightning:card>
                        </lightning:layoutItem>
                    </lightning:layout>
               </lightning:card>
            </lightning:accordionSection>
 
so in the style of the component I wrote as
.THIS .left-space{
    margin-left : 17px;
}

Now my question is without writing external CSS can we achieve the same using slds classes?

Thanks
meghna
Best Answer chosen by meghna n
Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use Padding to adjust whitespace. for your requirement you can use class="slds-p-left_medium"

Classes prefixed by slds-p- are used for adding padding. Classes prefixed in slds-m- are used for adding margin. The directions available for the spacing classes are top, right, bottom, and left.

https://lightningdesignsystem.com/utilities/padding/

Try below code: 
<aura:component >
    <lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="Provider Details">
        <lightning:accordionSection name="Provider Details" label="Provider Details" >
            <lightning:card title="">
                <lightning:layout multiplerows="true">
                    <lightning:layoutItem size="5" padding="around-small">
                        <div class="slds-p-left_medium"><lightning:formattedText value="10.20 Miles"/></div>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:card>
        </lightning:accordionSection>
    </lightning:accordion>
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use Padding to adjust whitespace. for your requirement you can use class="slds-p-left_medium"

Classes prefixed by slds-p- are used for adding padding. Classes prefixed in slds-m- are used for adding margin. The directions available for the spacing classes are top, right, bottom, and left.

https://lightningdesignsystem.com/utilities/padding/

Try below code: 
<aura:component >
    <lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="Provider Details">
        <lightning:accordionSection name="Provider Details" label="Provider Details" >
            <lightning:card title="">
                <lightning:layout multiplerows="true">
                    <lightning:layoutItem size="5" padding="around-small">
                        <div class="slds-p-left_medium"><lightning:formattedText value="10.20 Miles"/></div>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:card>
        </lightning:accordionSection>
    </lightning:accordion>
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
meghna nmeghna n
Hello Khan

This worked. 
thanks very much.

meghna