[SalesForce] Formatting SLDS Modal footer CSS issue in Lwc

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:

enter image description here

Desired Output:

enter image description here

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 the slds-modal__content. This is an example of how the modal needs to be structured in order to get proper formatting

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" 
         class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
        <header class="slds-modal__header"></header>
        <!-- Modal/Popup Box LWC body starts here -->
        <div class="slds-modal__content slds-p-around_x-large slds-p-top_none" style="overflow-y: auto;"></div>
        <footer class="slds-modal__footer" style="padding: 0.5rem 1rem;">
        </footer>
    </div>
</section>

In your case, as you are not using a lightning-button with type submit, you can just move your footer out of the slds-modal__content inside the slds-modal__container.

<template>
    <div class="slds-card slds-card_boundary">
        <div class="slds-grid slds-page-header forceRelatedListCardHeader">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <lightning-icon icon-name="action:add_file" size="xx-small" alternative-text="Connected">
                    </lightning-icon>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title slds-text-title_bold"> Bank Account ({recordCount}) </h2>
                </div>
                <div class="slds-no-flex">
                    <lightning-button label="New" title="Non-primary action" onclick={openModal}
                                      class="slds-m-left_x-small"></lightning-button>
                </div>
            </header>
        </div>
        <div if:true={recordFound} class="slds-media__body">
            <lightning-datatable
                                 hide-checkbox-column
                                 data={data}
                                 columns={columns}
                                 key-field="id"
                                 onrowselection={getSelectedRecords}
                                 onrowaction={handleRowActions}>
            </lightning-datatable>
        </div>
    </div>
    <div if:true={showLoadingSpinner}>
        <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
    </div>
<template if:true={isModalOpen}>
    <!-- Modal/Popup Box LWC starts here -->
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
             aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box LWC header here -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close"
                        onclick={closeModal}>
                    <lightning-icon icon-name="utility:close"
                                    alternative-text="close"
                                    variant="inverse"
                                    size="small"></lightning-icon>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New Bank Account</h2>
            </header>
            <!-- Modal/Popup Box LWC body starts here -->
            <div class="slds-modal__content slds-p-around_x-large slds-p-top_none" style="overflow-y: auto;"
                 id="modal-content-id-1">

                <lightning-record-edit-form
                                            object-api-name="Bank_Account__c"
                                            onsubmit={handleSubmit}
                                            record-id={currentRecordId}
                                            onsuccess={handleSuccess}>

                    <lightning-messages>
                    </lightning-messages>
                    <lightning-input-field field-name="Client__c">
                    </lightning-input-field>
                    <lightning-input-field field-name="Account_Number__c">
                    </lightning-input-field>
                    <lightning-input-field field-name="Account_Type__c">
                    </lightning-input-field>
                    <lightning-input-field field-name="Sort_Code__c">
                    </lightning-input-field>
                </lightning-record-edit-form>
            </div>
            <footer class="slds-modal__footer" style="padding: 0.5rem 1rem;">
                <lightning-button variant="neutral" label="Cancel" title="Cancel" onclick={closeModal}>
                </lightning-button>
                <button class="slds-button slds-button_brand" onclick={handleSave} title="Save">Save</button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
Related Topic