I have a component that uses the overlayLibrary to pop up a custom modal with a component inside of it. I extend this component via other components so that I can reuse the overlay library feature and have my function calls all in one place. I want to be able to set the width of the modal within the context of the component I am dynamically creating inside of it, however, I can't seem to make that happen.

If I set the width within the component I'm creating, the "container" modal window does not expand to show the entire component.

I create the component and modal like this:

showComponentInModal :  function(component, c, params, header, showCloseButton, cssClass, closeCallback){
    // component = reference to the view
    // c = component to be created within the modal.
    // params = the component parameters to pass
    var modalBody;
    $A.createComponent(c, params,
                       function(content, status) {
                           if (status === "SUCCESS") {
                               modalBody = content;
                                   header: header,
                                   body: modalBody,
                                   showCloseButton: showCloseButton,
                                   cssClass: cssClass,
                                   closeCallback: closeCallback

Is there a way in my cssClass definition that I can tell the modal window to be set at a specified screen width?


Sort of, you can use slds-modal_large or slds-modal_medium


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