1

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>

enter image description here

Can we achieve this anyhow?

1 Answer 1

3
<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>
1
  • Thank you, it works ! Commented Apr 4, 2022 at 7:15

You must log in to answer this question.

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