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

How to reduce height using slds
I have a piece of code in lightning component as follows.
<lightning:buttonIcon iconName="utility:filterList" size="medium" class="color" onclick="{!c.providerFilterSearch}" alternativeText="" />
<aura:if isTrue="{!v.showFindCareFilterCmp}">
<div aura:id="FilterDropDown" class="slds-dropdown slds-dropdown_right hide dropDownDiv">
<lightning:card title="Provider Filter">
<aura:set attribute="actions">
<button aura:id="cbtnDash" aria-controls="accordion-details-01" class="slds-button_reset slds-accordion__summary-action" label="" onclick="{!c.removeFilterComponent}">
<lightning:icon iconName="utility:forward" size="small" alternativeText="Indicates forward" />
</button>
</aura:set>
<hr class="height"></hr>
Now to reduce the height I have written a CSS as follows.
.THIS .height{
margin:1rem 0;
}
How to achieve the same using slds classes.
Please let me know with a piece of working code.
Thanks
meghna
<lightning:buttonIcon iconName="utility:filterList" size="medium" class="color" onclick="{!c.providerFilterSearch}" alternativeText="" />
<aura:if isTrue="{!v.showFindCareFilterCmp}">
<div aura:id="FilterDropDown" class="slds-dropdown slds-dropdown_right hide dropDownDiv">
<lightning:card title="Provider Filter">
<aura:set attribute="actions">
<button aura:id="cbtnDash" aria-controls="accordion-details-01" class="slds-button_reset slds-accordion__summary-action" label="" onclick="{!c.removeFilterComponent}">
<lightning:icon iconName="utility:forward" size="small" alternativeText="Indicates forward" />
</button>
</aura:set>
<hr class="height"></hr>
Now to reduce the height I have written a CSS as follows.
.THIS .height{
margin:1rem 0;
}
How to achieve the same using slds classes.
Please let me know with a piece of working code.
Thanks
meghna
Please refer the below Link for the further adjusments:
https://lightningdesignsystem.com/utilities/margin/#site-main-content
Thanks,
Maharajan.C
Use this for your requirement:
<hr class="slds-var-m-*_medium"> </hr>
And also follow the link:
https://lightningdesignsystem.com/utilities/margin/
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi