You need to sign in to do that
Don't have an account?

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
<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
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:
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
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:
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 worked.
thanks very much.
meghna