I have used the SLDS Modal and added Lightning Record Edit form inside the modal in lwc. The Lightning record edit form with modal it is not in the proper footer. I need to CSS style on it.
Current Output:
Desired Output:
Html:
<footer class="slds-modal__footer" style=" height:1005px; margin-top: 0px; margin-right: -24px; margin-bottom: -24px; margin-left: -24px;">
<lightning-button variant="neutral" label="Cancel" title="Cancel" onclick={closeModal}> </lightning-button>
<lightning-button variant="brand" class="slds-var-m-left_small" type="submit" label="Save"></lightning-button>
</footer>
Best Answer
You have misplaced the modal footer, in order to get proper styling you should place your modal footer at the same level as the
slds-modal__header
and theslds-modal__content
. This is an example of how the modal needs to be structured in order to get proper formattingIn your case, as you are not using a
lightning-button
with type submit, you can just move your footer out of theslds-modal__content
inside theslds-modal__container
.