+ Start a Discussion
Raouf Ben HassineRaouf Ben Hassine 

lightning quick action modal width


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.


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.