Increase size (width) of Lightning Web Component Quick Action Modal Popup Salesforce

So now we can have Lightning Web Components as Quick Actions. That's a big relief as earlier we were using custom popups to display the modal on Quick Action buttons.

Now the issue with these modals are it comes with a specific size (height & width) which is not  appropriate for all requirements. If you are a good designer who needs a perfect UI then you might think of updating the height and width of the default popup size.

If you are still looking for it, then fortunately you have landed on the right blog. Please follow below steps to increase the size of the LWC Quick Action modal popup.

Step 1 : Create an external css file as shown below : 

custommodal.css

1 2 3 4 5

.slds-modal__container{ width: 90% !important; max-width: 90% !important; }

Step 2 : Create a static resource in your org and upload the css file.

Step 3 : Import the static resource in your LWC and load the styles on the load of the component using connectedCallback function as shown below : 

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13

<template> <lightning-quick-action-panel header="Quick Action Title"> <p>Welcome to SalesforceBolt.com</p> <div slot="footer"> <lightning-button variant="neutral" label="Cancel" onclick={closeAction} ></lightning-button> <lightning-button variant="brand" label="Save"></lightning-button> </div> </lightning-quick-action-panel> </template>

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

import { LightningElement } from "lwc"; import modal from "@salesforce/resourceUrl/custommodalcss"; import { CloseActionScreenEvent } from "lightning/actions"; import { loadStyle } from "lightning/platformResourceLoader"; export default class QuickActionLWC extends LightningElement { connectedCallback() { loadStyle(this, modal); } closeAction() { this.dispatchEvent(new CloseActionScreenEvent()); } }

Output

If you need to update the width then you have to make the changes in the css file and modify the static resource file again.

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)