9

I want to pop-up a modal LWC using a quick action, without any Aura components. This should be possible since Summer'21.

I am currently using an Aura component that does the pop-up and at the same time specifies the maximum size of the modal.

When specifying a LWC in a quick action, I cannot specify a size. So how can I do it? Because the default size is too small for me.

If I look at the Salesforce documentation on lightning-quick-action-panel, it states "The lightning-quick-action-panel component implements the Modals blueprint in the SLDS".

In that section, I see a demonstration of the slds-modal_large class and I would like to apply it to my modal, but I don't know how: slds-modal_large is not a class that can be applied to lightning-quick-action-panel. I want to use lightning-quick-action-panel because a) it is recommended and b) it gives a nice border for the modal.

Where and how in the CSS or HTML file do I combine lightning-quick-action-panel and slds-modal_large?

1
  • 1
    if you inspect the LWC quick action (or even standard quick actions), you'll see it has a wrapper around it that limits its width that you can't target/change (uiModal--medium modal-container) due to any styles you apply being scoped to your component. I don't think there's a way without going around that (and will eventually not work) like the loadStyle hack Commented Jul 28, 2021 at 20:08

1 Answer 1

2

It's possible to increase the size of a Quick Action's modal using loadStyle() hacks.

To do this, create a new or use an existing static resource containing a CSS file with the following code:

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

.slds-modal__content {
  height: 100% !important;
  max-height: 95% !important;
}

Then, import the static resource into your component and that's it! It should work seamlessly.

import { LightningElement } from "lwc";
import { loadStyle } from "lightning/platformResourceLoader";

import LargeQuickActionModal from "@salesforce/resourceUrl/LargeQuickActionModal";

export default class QuickActionWithLargeModal extends LightningElement {
  connectedCallback() {
    Promise.all([
      loadStyle(this, LargeQuickActionModal + "/increaseModalSize.css")
    ]);
  }
}

Alternatively, you could try adding the slds-modal_large class if you're loading a JS file from the static resource. This would locate the modal in the DOM and add the class. However, this might not work within the context of Quick Action modals due to additional modifications that render the class ineffective.

Demo enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .