1

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;

}

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

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

  • 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 Apr 10 at 11:29
  • Try to set a word wrap or layout item size. @devforce – Dahn Apr 11 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.