Setting the width of an inner modal nested within an outer modal

Question

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() {

            }
          });
        }
      }
    );
  },

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.

component.find('overLib').showCustomModal({
    cssClass: "mymodal slds-modal_small",
    // set other properties
})