0

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;
                   component.getSuper().find('overlayLib').showCustomModal({
                                   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?

0
-1

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

https://www.lightningdesignsystem.com/components/modals/

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