5

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)

5 Answers 5

-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

2
  • Link-only answers are discouraged, and may be deleted. (See: Why and how are some answers deleted?.) Please edit you answer to add more. (From How do I write a good answer?: "...please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link....")
    – Moonpie
    Commented Sep 30, 2021 at 15:35
  • 2
    The only issue with this approach is, it affects the other modal's width as well because the CSS is cached. Commented Oct 26, 2021 at 5:54
3

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

1
  • exactly what I was looking for to isolate the change to only one component
    – chris
    Commented Jan 10, 2023 at 2:09
0

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.

1
  • Not sure I understand your answer: Are you advising against the use of a QuickAction in case the width of the modal window is too small? Because lightning-layout doesn't do anything in order to increase the width of the modal window (using LWC), neither does the class slds-modal_large (because one is already inside the modal). Commented Jul 6, 2022 at 11:08
0

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 :)

0

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));
    });
 }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .