1

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>
1

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>
4
  • Sorry it is not working because the Slds- model is another lwc form and lightning-record-edit another lwc form .so it is not working – user88729 Sep 30 '20 at 11:59
  • Where u edited in the above answer half of the code is missing, so it cannot work @mnunezdm – user88729 Sep 30 '20 at 12:05
  • I have included the entire template again, I left only the things you had to edit – mnunezdm Sep 30 '20 at 14:22
  • It is not working as you mentioned above – user88729 Sep 30 '20 at 14:38
1

In this approach, we hide default buttons of the record form and create our own

Copy paste this code it's working fine

we have to override CSS :

Create a CSS file and add in static resource

File Content :

.recordForm .slds-align_absolute-center{
    display:none;
}

Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';
import CUSTOMCSS from '@salesforce/resourceUrl/{yourStaticResourceFileName}';

HTML CODE :

<template>
    <div>
        <lightning-button class="slds-m-around_small" variant="brand" label="Open Modal" onclick={handleClick} ></lightning-button>
    </div>
    <div if:true={showModal}>
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large"
            aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-icon style="cursor: pointer;" class="slds-float_right" icon-name="utility:close" size="small" onclick={handleClose} ></lightning-icon>
                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Create {objectApiName}</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <lightning-record-form
                        class="recordForm"
                        object-api-name={objectApiName}
                        layout-type="Full"
                        columns="2">
                    </lightning-record-form>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={handleCancel}>Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</template>

JS CODE :

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import CUSTOMCSS from '@salesforce/resourceUrl/recordForm'; //this is my static resource file name
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class RecordFormModal extends LightningElement {
    showModal = false;
    objectApiName = 'Account';
    isCssLoaded = false;

    renderedCallback(){
        if(this.isCssLoaded) return
        this.isCssLoaded = true;
        loadStyle(this,CUSTOMCSS).then(()=>{
            console.log('loaded');
        })
        .catch(error=>{
            console.log('error to load');
        });
    }
    
    handleClick(){
        this.showModal = true;
    }

    handleClose(){
        this.showModal = false;
    }

    handleSave(){
        this.template.querySelector('lightning-record-form').submit();
        this.showModal = false;
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "Account Created",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }

    handleCancel(){
        this.showModal = false;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy