[SalesForce] Display multiple buttons in single row in lightning card footer

I have a lightning card embedded in a Case record and I want to display three buttons in a same row. Unfortunately, last button gets displayed in next row because of button label name size. I tried adding custom css styling for the button but it gets overwritten by slds-card-footer.

Is there a way to dynamically change the button size based on the label so that it always gets displayed in a single row.

Below is what I have tried.

<article class="slds-card">
   <!--Header code-->
   <!--Body code-->
   <footer class="slds-card__footer">
        <div class="mybtn">
             <button class="slds-button slds-button_neutral" onclick="{!c.onCancelSelectionClick}">Cancel</button>
             <button class="slds-button slds-button_brand" onclick="{!c.onSaveAssetSelectionClick}" >Update Asset</button>
             <button class="slds-button slds-button_brand" onclick="{!c.onSaveAssetSelectionClick}" disabled="{!v.disableButton}">Update Replacement Asset</button>                
        </div>
   </footer>
</article>

.THIS.mybtn {
padding: .75rem 1rem;
margin-top: .75rem;
text-align: center;
font-size: .7rem;
border-top: 1px solid rgb(221, 219, 218);
margin-bottom: 10px;

}

Best Answer

You will need to use slds-grid and override standard slds css on buttons.

CSS:

.THIS .btnCustomStyle{
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
}
.THIS .btnCustomStyle{
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
}

Your Component:

<article class="slds-card" style="width:31%">
    <!--Header code-->
    <!--Body code-->
    <footer class="slds-card__footer">
        <div class="mybtn slds-grid">
            <button class="slds-col slds-button slds-button_neutral btnCustomStyle">Cancel</button>
            <button class="slds-col slds-button slds-button_brand btnCustomStyle" >Update Asset</button>
            <button class="slds-col slds-button slds-button_brand btnCustomStyle">Update Replacement Asset</button>                
        </div>
    </footer>
</article>
Related Topic