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!

10

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
})
  • Have you made it work using this approach? Where would you add those classes, to the overlay component?? – Daniel Collier May 21 '18 at 9:34
  • Add it where you set the cssClass attribute. – Raul May 21 '18 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 Oct 23 '18 at 15:00
  • 1
    @christoph could you post a new question for your issue? An example with an issue would be great. – Raul Oct 23 '18 at 17:56
  • @Raul is there any way to increase the height? – sdandamud1 May 21 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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