Aligning Footer Button to right in Lightning card

buttonlightning-cardlightning-web-componentsslds

I am working on dashboard screen. I have a lightning card which where I want a button on right side inside a footer.
Below is the code I am using.

But When I am trying to align the button inside footer to right using either slds-float_right or even CSS, it is breaking and going outside of card.

           <lightning-card>
                <div slot="title" class="cardHeading">New</div>
                <div class="slds-border_top"></div>
                    <div class="slds-text-align_center">
                        <span class="countText">
                            100
                        </span>       
                    </div>
                    <div class="slds-align_absolute-center">
                            Based on current Fiscal Month
                    </div>
                    <div slot="footer"> 
                            <button  title="View"  data-id='test' onclick={handlenavigation}  class="slds-card__footer-action viewButton slds-button slds-button_neutral">View</button>           
                    </div>
            </lightning-card>

Can we achieve this anyhow?

Best Answer

<template>

<lightning-card>
    <div slot="title" class="cardHeading">New</div>
    <div class="slds-border_top"></div>
        <div class="slds-text-align_center">
            <span class="countText">
                100
            </span>       
        </div>
        <div class="slds-align_absolute-center">
                Based on current Fiscal Month
        </div>
        <div slot="footer" class="slds-clearfix"> 
            <lightning-button label="Neutral" title="Non-primary action"   class="slds-var-m-left_x-small slds-float_right"></lightning-button>
      
        </div>
</lightning-card>

Related Solutions

[SalesForce] SLDS lightning card margin issue

The cards should be in their own layout boxes (instead of being the layout boxes), and should not be floating. Elements that restrict size changes (e.g. slds-size_1-of-3) should be wrapped around whatever it is you're trying to size. Most of the time it doesn't matter, but it helps to get in the habit of doing so, and doing so means using lightning:layoutItem.

Here's a self-contained demonstration using your non-dynamic card example (note: I converted this to an iteration for brevity, it still works "the long way around"):

<aura:application extends="force:slds">
    <aura:attribute name="items" type="Integer[]" default="[1,2,3,4,5,6]" />
    <div>Non Dynamic Cards</div>
        <lightning:layout multipleRows="true">
            <aura:iteration items="{!v.items}" var="item">
        <lightning:layoutItem size="4" padding="around-small">
            <lightning:card >
                <aura:set attribute="title">
                    <lightning:icon iconName="utility:connected_apps" size="small"/>
                    Card {!item}
                </aura:set>
                <aura:set attribute="footer">
                    <lightning:badge label="Tag1"/>
                    <lightning:badge label="Tag2"/>
                    <lightning:badge label="Tag3"/>
                </aura:set>
                Card Body (custom component)
            </lightning:card>
        </lightning:layoutItem>
            </aura:iteration>
    </lightning:layout>
</aura:application>

[SalesForce] Edit the footer of lightning card

You can split your card into sections using aura:set's as specified in the documentation (ex, ehader, body, footer), you might want to refactor your code to something similar to what is provided in the documentation:

 <lightning:card>
    <aura:set attribute="title">
        <lightning:icon iconName="utility:connected_apps" size="small"/>
        {! v.title }
    </aura:set>
    <aura:set attribute="footer">
        <lightning:badge label="Tag1"/>
        <lightning:badge label="Tag2"/>
        <lightning:badge label="Tag3"/>
    </aura:set>
    Card Body (custom component)
</lightning:card>

Best Answer

Related Solutions

[SalesForce] SLDS lightning card margin issue

[SalesForce] Edit the footer of lightning card

Related Topic