2

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.

$A.createComponent(
      "c:nestedModal",
      { dataWrapper: wrap},
      function(content, status) {
        if (status == "SUCCESS") {
          component.find("overLib").showCustomModal({
            body: content,
            showCloseButton: true,
            closeCallback: function() {

            }
          });
        }
      }
    );
  },
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.

component.find('overLib').showCustomModal({
    cssClass: "mymodal slds-modal_small",
    // set other properties
})
2
  • 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? – PartOfTheOhana Jan 12 '20 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 '20 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.