4

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!

2 Answers 2

12

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
})
6
  • Have you made it work using this approach? Where would you add those classes, to the overlay component?? Commented May 21, 2018 at 9:34
  • Add it where you set the cssClass attribute.
    – Raul
    Commented May 21, 2018 at 10:51
  • 1
    This works just fine, when you know how large of a modal you want when creating it. What I cannot figure out however is, how to add that "slds-modal_large" class when the modal dialog is already open. It works fine when I manually add it via Dev console, but $A.util.addClass(component.find('overlayLib'), 'slds-modal_large'); does not work. Does anyone have any ideas?
    – Christoph
    Commented Oct 23, 2018 at 15:00
  • 1
    @christoph could you post a new question for your issue? An example with an issue would be great.
    – Raul
    Commented Oct 23, 2018 at 17:56
  • @Raul is there any way to increase the height?
    – sdandamud1
    Commented May 21, 2019 at 21:47
-1

You can override the .slds-modal__container class attribute

Example:

.THIS .slds-modal__container{
    min-width: 680px;
    padding: 0;

  }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .