I have 2 modals nested within eachother, and I want to control the width of the inner modal. How do I do that?

The outer modal is launched from a quick action. The user can take some action from the outer modal that creates the inner modal. The inner modal takes the width of the outer modal. Instead, I want to control that width, but I can't seem to access that html to apply the css. How do I do this?

When inspecting the inner modal, this css does the trick. but I can't access the outer container from c:nestedModal. .slds-modal__container{ width:90%; max-width: none; min-width: 40rem; height: 100%; padding: 3rem 0; }

The outer modal contains several components. Here is the code from the sub-component that creates the inner modal.

      { dataWrapper: wrap},
      function(content, status) {
        if (status == "SUCCESS") {
            body: content,
            showCloseButton: true,
            closeCallback: function() {


1 Answer 1


As lightning:overlayLibrary inherits styling from slds-modal, you could use standard modal styling in overlaylibrary's cssClass attribute to specify the width.

Before writing custom styling, try standard modal options as .slds-modal_small, .slds-modal_medium or .slds-modal_large to see if it fits your requirement.

    cssClass: "mymodal slds-modal_small",
    // set other properties
  • using the standard modal option did the trick cssClass: "mymodal slds-modal_small" How did you know mymodal is the property that needed to be set? Jan 12, 2020 at 15:39
  • 1
    mymodal is just a css class name from documentation's example I copied. slds-modal_small is the slds class responsible for making it work.
    – Raul
    Jan 12, 2020 at 16:24
  • 1
    this helped me too, thank you! Nov 30, 2021 at 20:32

You must log in to answer this question.

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