+ 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