function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Raouf Ben HassineRaouf Ben Hassine 

lightning quick action modal width

Hello,

I am created an LWC quick action to be added to a record layout page. It is required to wrap the content of the modal in a lightning-quick-action-panel as per this dev guide Create Screen Quick Actions (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_actions_screen).

I have got this working perfectly.

My question is about increasing horizontal space taken by the modal when it is open.

 

Modals aren't supported by styling hooks mechanisms, so I can't use them.

I tried overriding slds-modal__container without success unlike for aura components.

Can this be done?

mukesh guptamukesh gupta
Hi Raouf,

Please use below code:-

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
.slds-modal__container {
    max-width: 80rem !important;
    width: 80% !important;
}
if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 

 
Raouf Ben HassineRaouf Ben Hassine
That's not the answer I'm looking for. As I said in the question, I already did that without success.
Tony White (BNE)Tony White (BNE)
FYI - I just followed this - https://salesforcegirl.in/2021/05/31/how-to-change-the-size-of-quick-actions-modal-popup-in-lwc/
That worked for me using the lightning-quick-action-panel in an lwc component
Rina Nachbas 4Rina Nachbas 4
also this link suggest the same with detailed explenation : https://www.salesforcebolt.com/2021/08/increase-size-width-of-lightning-web.html
Brian Kristiansen 15Brian Kristiansen 15
Note - the approach linked to by Tony changes all modals after loading static styles.
The approach above with only the lwc.css does not work for me either.
Robert JamesonRobert Jameson
Tried a lot of methods so that I could record the layout of Tarpon Springs Homes (https://www.homesweethomesfl.com/tarpon-springs/). But no method is working for me. Have you found any solution for this issue. or any alternative of it. SO that we could continue our project work. Our whole project of property selling get stuck due to the layout recording issue.
Hitesh chaudhariHitesh chaudhari
Put this file in a static resource with the name as QuickActionFullScreen.css

 .slds-modal__container { min-width: 90vw; }

-----------------------------------
Inside LWC :
import { LightningElement ,track ,wire , api } from 'lwc';
import QuickActionFullScreen from '@salesforce/resourceUrl/QuickActionFullScreen';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
renderCallBack()
{
        loadStyle(this, QuickActionFullScreen)); // this will make compoent bigger on load .
}
Herbert S OliveiraHerbert S Oliveira

Hi Everyone,

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

Sterling WellsSterling Wells

@herbert S Oliveira

I tried doing this to modify the style of one of my `Lightning-Quick-Action-Panel` but it does not work. 

The rest of the post seems to be correct though -- you can use a static resource to override the slds-modal__container and although it is only invoked in a single LWC, it affects all components. 

Herbert S OliveiraHerbert S Oliveira

Hi @Sterling Wells,

It worked fine for me.
I recommend making sure the jquery js file was correctly loaded as a static resource.
Also, can you please confirm if the "Use Lightning Web Security for Lightning web components (GA) and Aura components (Beta)" option is enabled in your org? (Session Settings >> Lightning Web Security)

Regards