2

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;

}

Improve this question

2 Answers 2

Reset to default
3

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>
Improve this answer
1
  • However, I would like to know how to came know that padding-left and padding-right will resolve the issue.
    – devforce
    Commented Apr 10, 2019 at 11:25
4

Try to use lightning-layout and lightning-layout-item tags to describe a certain order in your elements.

<footer class="slds-card__footer">
    <div class="mybtn">
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <button class="slds-button slds-button_neutral" >Cancel</button>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <button class="slds-button slds-button_brand" >Update Asset</button>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <button class="slds-button slds-button_brand">Update Replacement Asset</button>                
            </lightning-layout-item>        
        </lightning-layout>
    </div>
</footer>

https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example

https://developer.salesforce.com/docs/component-library/bundle/lightning-layout-item/example

Improve this answer
2
  • I am able to get the all buttons in a single row with this option but name of last two buttons was getting displayed in two lines.
    – devforce
    Commented Apr 10, 2019 at 11:29
  • Try to set a word wrap or layout item size. @devforce
    – Dahn
    Commented Apr 11, 2019 at 8:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .