Set width of modal window of lightning action

There seems to be some confusion around this question. The question asks specifically how to increase modal width when the modal is opened by a lightning action button.

Some answers will work when the custom component creates the modal, like adding

.THIS.slds-modal__container{
 max-width: 70px !important;
 width:70px !important;
}

to the component style definition. But this does not work when the modal is opened by an action button (or apparently also not when the modal is created dynamically within the component)

Other snippets will only work when used with certain API versions (not current) like adding

<style>
 .slds-modal__container{
     max-width: 70rem !important;
     width:70% !important;
 }
</style>

directly to the component body

The method of forcing the style to be applied by loading the above as a static resource looks like it is working for actions, but my experience with css in static resources is that it makes your style tedious to update and maintain.

/* update Sept 8 2019 */

If you are developing a managed package you are best to stick with the static resource method directly above this edit. The method below works but I just had a package fail security review for no other reason than using this inline method. Details were 'improper load of css'. When queried the response from partner support was 'Although our technology allows for it, it's against the AppExchange security policies.'

/* end update */

There is a way that I have had success with when trying to control the width of the modal generated by an action button.

Lightning components support the <aura:html tag=""> tag. Looking at the tags supported we see that "style" is allowed. Putting this together with the solution above we can add

<!--  this tag sets modal width -->
<aura:html tag="style">
    .slds-modal__container {
     min-width: 90vw;
    }
</aura:html>      

to our component body to increase the modal width to 90% of the view width.


Okay, So I had the same requirement where I needed to increase the pop-up size. So I have gone through various link also this. But none of them seems working for me. I tried to put the css suggested by @Amulyaranjan in style class but that also didn't work for me. it seems like component css load first and than the component css override that css. Other solution could be include the style tag in the component but that too is not supported after spring '18. SO somehow I needed that CSS suggested by @Amulyaranjan or @crmprogdev. So for that what I did is same as mentioned in many of the above comments but the only difference is I put that StyleSheet in the Static Resources

.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}

above is my stylesheet and I put this style sheet in my component.

<ltng:require styles="{!$Resource.popupCSS}" />

and below is my scree-shot of the quick action. It looks like style in the ltng:require load in last after all styles get loaded. So, this hack saves my life. enter image description here


Go to your Component page......

And put a style for .slds-modal__container and adjust the width as per your requirement.

see below code----

===================================Example======================================

.slds-modal__container{
       max-width: 70rem !important;
       width:70% !important;

}