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?

Improve this question
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

Reset to default
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.

Improve this answer
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, Commented Oct 7, 2022 at 5:32
  • Hi @Eliana, That sounds like a mismatching < and </ pair. Commented Oct 7, 2022 at 7:46

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.