Wednesday, July 10, 2019

How to increase Modal/Popup width in Lightning Web Component(lwc)

This post explains how to increase the modal/popup width in lightning web component(lwc)


IncreaseWidthOfModalBoxInLWC.html
<template>

    <center class="slds-theme_default">
        <p>
            <b>Show Modal Box using Lightning Web Componentes</b>
        </p><br/><br/>
        <lightning-button label="Show Modal" onclick={openmodal} variant="brand"></lightning-button>
    </center><div></div>

    <template if:true={openmodel}>
        <section aria-describedby="modal-content-id-1" aria-labelledby="modal-heading-01" aria-modal="true" class="slds-modal slds-fade-in-open" role="dialog" tabindex="-1">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={closeModal} title="Close">
                        <lightning-icon icon-name="utility:close" size="medium" variant="inverse"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 class="slds-text-heading_medium slds-hyphenate" id="modal-heading-01">Modal Box Example</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <center>
                        <h2>
                            <b>Welcome to Salesforce Code Crack</b>
                        </h2><br/>
                        <p>Happy Learning!!!</p>
                    </center>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button label="Cancel" onclick={closeModal} variant="neutral"></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <lightning-button label="Save" onclick={saveMethod} variant="brand"></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

Approach 1:

Using external CSS File
To create a .css file,
follow the step:
1. Right-click on your lwc component.
2. Select New File
3. Name the file same as your lwc component with the .css extension


IncreaseWidthOfModalBoxInLWC.css
.slds-modal__container {
    max-width: 80rem !important;
    width: 80% !important;
}

Approach 2:

Using Static Resource

Create the normal .css file, upload css file in static resources and import static resource file in your Lightning web component
check below link how to import static resources in lwc


IncreaseWidthOfModalBoxInLWC.js
import { LightningElement, track } from 'lwc';

export default class IncreaseWidthOfModalBoxInLWC extends LightningElement {
    @track openmodel = false;
    openmodal() {
        this.openmodel = true
    }
    closeModal() {
        this.openmodel = false
    } 
    saveMethod() {
        alert('save method invoked');
        this.closeModal();
    }
}

IncreaseWidthOfModalBoxInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="IncreaseWidthOfModalBoxInLWC">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Result

1 comment:

  1. Please use a new class to overide modal width rather than .slds-modal__container class in css

    ReplyDelete