spring 21 LWC quick actions - how to change modal width?

Question

So if i decided to wrap my lwc component in an aura component i could easily do something like

<aura:html tag="style">
    .slds-modal__container {
     min-width: 90rem;
    }
</aura:html>  

or apparently (recent googling) load css via a static resource in aura.

So far I've just created a .css on my lwc component, but no luck there. Has anyone tried using a static resource.....or should i just wrap the thing in a aura component and call it a day (god i hate having to do that)

Answer 1

This link explain exactly what you want https://www.salesforcebolt.com/2021/08/increase-size-width-of-lightning-web.html

it suggests to load into your LWC css from static resource, there you define your desired width, it works like charm for the LWC quick action of ScreenAction

Answer 2

The approved answer keeps the CSS in cache and affects other modals, you can create an aura component and call your LWC component from there like,

Creating LWC component

QuickActionLWCWidth.html

        <header class="slds-modal__header">
        <h2 id="modalheading" class="slds-modal__title slds-hyphenate">
        I am header
        </h2>
    </header>
    <p>I am body content</p>
    <footer class="slds-modal__footer">
        <lightning-button
        variant="neutral"
        label="Cancel"
        onclick={closeAction}
        ></lightning-button>
        <lightning-button
        variant="Brand"
        label="Save"
        onclick={handleSave}
        ></lightning-button>
    </footer>

QuickActionLWCWidth.js

import { LightningElement, api } from "lwc";

export default class QuickActionLWCWidth extends LightningElement {
    @api recordId;
    closeAction() {
        const closeModalEvent = new CustomEvent("modalclose");
        this.dispatchEvent(closeModalEvent);
    }
    handleSave() {
        const closeModalEvent = new CustomEvent("modalclose");
        this.dispatchEvent(closeModalEvent);
    }
}

QuickActionLWCWidth.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Now create aura component like,

QuickActionLWCWidthAura.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <aura:html tag="style">
        .cuf-content { padding: 0 0rem !important; } .slds-p-around--medium {
        padding: 0rem !important; } .slds-modal__content{ height:unset !important;
        max-height:unset !important; } .slds-modal__container{ max-width:80rem
        !important; width:80% !important; }
    </aura:html>

    <c:quickActionLWCWidth
        recordId="{!v.recordId}"
        onmodalclose="{!c.handleClose}"
    ></c:quickActionLWCWidth>
</aura:component>

QuickActionLWCWidthAuraController.js

({
    handleClose: function (component, event, helper) {
    $A.get("e.force:refreshView").fire();
    $A.get("e.force:closeQuickAction").fire();
    }
});

Feel free to check more details on original post

Answer 3

Loading a css with an override for slds-modal__container works, but as you may know, it affects other components, including the standard salesforce components like the New Record. To change only one specific quick action component you can wrap the LWC with an Aura (too much work in my point of view) or you can achieve this using jQuery.

Steps:

1 - Download the latest version of minified jquery and load it to salesforce as a static resource 2 - Import it to your LWC 

import { loadScript } from 'lightning/platformResourceLoader';
import jQuery363min from '@salesforce/resourceUrl/jQuery363min';

3 - Use the connectedCallback to load jQuery and manipulate the modal-container div style 

connectedCallback() {
    Promise.all([
        loadScript(this, jQuery363min)
    ]).then(() => {
        $('.modal-container.slds-modal__container').attr('style', 'width: 80% !important;max-width: 80% !important;');
    }).catch(error => {
        console.log('Error loading libraries: ' + JSON.stringify(error));
    });
 }

Answer 4

You should not be using this "trick." At some point, it will not work, and you'll be stuck looking for a new solution. Use lightning-layout and lightning-layout-item to make your components responsive, or at worst, pop out your own modal component with the desired size. SLDS specifies three different modal sizes, so it's possible that the UI may end up having a size option in the future.

Answer 5

One way to modify the width of the modal is through your .js file:

let modal = document.querySelectorAll(".slds-modal__container");
modal[0].style.minWidth = "90rem";

Be sure to include this change after you have rendered the modal. Additional Info: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Best Regards :)