Salesforce lightning Action modal size

Question

I used a Lightning Component and I wanted to know how can I set the width of lightning action modal popup?

Below my code :

Markup component :

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="Lead_Coface_Controller">
 
    <div aura:id="messages">
    {!v.message}
    </div>
 
</aura:component>

css :

.THIS{
 
}

Answer 1

Can you try the below code.

In Controller in doInt(or at required place)

var modal1 = component.find("messages");

$A.util.addClass(modal1,'YourClass');

In style

.THIS .YourClass{width:50%;} //change the css value

Answer 2

Below a part of the app.css

.slds-modal__container {position:relative;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin: 3px 2rem;height:100%;padding:3rem 0;border-radius:.25rem;}
@media (min-width: 48em) {
  .slds-modal__container {margin:0 auto; width:50%; max-width:40rem; min-width:20rem}
}

Answer 3

In the <section> tag of the modal, add the class slds-modal_large or slds-modal_medium, depending on what you want.

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">         
      <div class="slds-modal__container">
         SOME MODAL STUFF HERE
      </div
</section>

Answer 4

You will be having the modal code in your component & logic in controller js So, Add this code in css file, make sure you have this class named slds-modal__container in your component modal code

.THIS .slds-modal__container {
  margin: 0 auto;
  width: 50%;
  max-width: 100%;
 }