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

Post a Comment

10 Comments

  1. How can this be applied to the modal for screen flows?

    ReplyDelete
    Replies
    1. I don't think that the functionality is available. Please upvote below idea to support it
      https://trailblazer.salesforce.com/ideaView?id=0874V000000Pi3bQAC

      Delete
  2. Thank you so much for this! Just a question...
    Is there anyway we can even increase the height of the quick action panel beyond the

    "height: 100%"

    ReplyDelete
    Replies
    1. Interesting, maybe you can try it. We might be having horizontal scroll bars in that case.

      Delete
  3. Thanks it is really helpful for me bcz I am new to LWC, Is there any way to apply on only particular action? bocz it will applied on all actions popup

    ReplyDelete
  4. can we do it without using static resource?

    ReplyDelete
    Replies
    1. I am afraid not, because it will always give priority to the default css until forced to change using an external one.

      Delete
  5. Could another approach be to separate the component and quick action. Use a headless quick action and Lightning message service to publish a message when the quick action is clicked.

    Put your LWC component modal on the lightning page somewhere, subscribed to the message channel. Toggle the visibility when a message is received.

    The modal can then be any size you like without affecting any of the standard sf modals

    ReplyDelete