0

I am trying to add a checkbox next to the save button. The save and the cancel buttons are inside a lightning card P slot ="footer" The checkbox does not appear in the same row as that of the save and cancel buttons. It's appearing in the next row.

My code:

<p slot= "footer">
                    <lightning-button
                            class="slds-float_none"
                            variant="neutral"
                            label="Cancel"
                            title="Cancel"
                            onclick={handleCancel}>
                    </lightning-button>
                    <lightning-button
                            class="slds-float_none"
                            variant="brand"
                            label="Save"
                            title="Save"
                            onclick={handleSave}>
                    </lightning-button>
                    <lightning-input type='checkbox'  label="Red"> 
                 </lightning-input>
</p>

Should I be using normal footer and lightning-layout/Layout-item instead?

1
  • Hi, Eliana. You did not add your code. Please add it so someone can help you. Commented Oct 5, 2022 at 7:54

1 Answer 1

0

The benefit of the slot approach is that you can add any HTML and CSS that you want e.g. one of the grid layouts:

<p slot= "footer">
    <div class="slds-grid slds-grid_align-center">
        <div class="slds-col">
            <lightning-button ...>
            </lightning-button>
        </div>
        <div class="slds-col">
            <lightning-button ...>
            </lightning-button>
        </div>
        <div class="slds-col">
            <lightning-input ...> 
            </lightning-input>
        </div>
    </div>
</p>

Note that the design blueprint for cards does not place buttons where you are placing them so do check that you have a good reason for putting the buttons in the footer.

2
  • Thanks. But the Div tag inside a <p slot = "footer"> throws error that the <p> tag does not have a matching closed tag though it has </p>. So , I didn't put any checkbox and tried to display a message instead,
    – Eliana
    Commented Oct 7, 2022 at 5:32
  • Hi @Eliana, That sounds like a mismatching < and </ pair.
    – Keith C
    Commented Oct 7, 2022 at 7:46

You must log in to answer this question.

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