[SalesForce] How to apply css to Lightning:overlayLibrary

My objective is to control the width of the modal provided by lighting:overlayLibrary component. I am trying to do it by overriding the css applied to the slds-modal__container. I was hopeful this would be as easy as adding the override to the style page of the component that contains the modal and applying it at modal creation using the cssClass class param.

I have tried a few variations based on the following with no luck

the component

<component>
  <lightning:overlayLibrary aura:id="theModal" />
  <!-- a button to open the modal -->
</component>

the controller

({
  openModal:function(component){
        var modalBody;
        $A.createComponent("c:pseudoContent", {},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   modalBody = content;
                                   component.find('theModal').showCustomModal({
                                       header: "Application Confirmation",
                                       body: modalBody, 
                                       showCloseButton: true,
                                       cssClass: "mymodal",
                                       closeCallback: function() {
                                           alert('You closed the alert!');
                                       }
                                   })

                               }

                           });
  }

})

and the sytle

.THIS .mymodal div.slds-modal__container{
  width:90%;
  max:width:90%
}

This produces a page containing

<div class="panel slds-modal mymodal slds-fade-in-open" aria-labelledby="title_2454:0" tabindex="-1" role="dialog" aria-modal="true" data-aura-rendered-by="2477:0" style="opacity: 1;">
  <div class="modal-container slds-modal__container" data-aura-rendered-by="2478:0">
    ...
  </div
</div>

but when I inspect the page the styles in the mymodal class are not being applied to the element, I guess it is a scope issue??

Is there a way to get control of the width of the modal?

Your help is appreciated!

Best Answer

Modals in lightning:OverlayLibrary inherits styling from SLDS modal.

There are some standard classes you can use to adjust the width before moving with some custom CSS, like .slds-modal_large or .slds-modal_medium.

Example:

component.find('overlayLib').showCustomModal({
    cssClass: "mymodal slds-modal_large",
    // setting other properties
})
Related Topic