Set width of modal window of lightning action

Question

Do you know how can I set the width of a modal window opened by a lightning component action? In the edit options I can set only the height but is not enough because the content of my table is not completely shown. Here is the code:

<aura:component access="GLOBAL" implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" controller="OrganizeEnvelopeController" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="plico" type="Envelope__c" />
    <aura:attribute name="fixedDocs" type="Bit2Sign__Fixed_Document__mdt[]" />
    <div class="c-container">
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="6">
                <aura:text value="Tipologia Plico: "/>
                <aura:text value="{!v.plico.Bit2Sign__Tipologia_Invio__c}"/>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" size="6">
                <aura:text value="Descrizione Plico: "/>
                <aura:text value="{!v.plico.Name}"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <aura:text value="Elenco Documenti"/>
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
              <th scope="col">
                <div class="slds-truncate" title="Nome documento">Nome documento</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Tipologia Documento">Tipologia Documento</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Stato">Stato</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Firmatari">Firmatari</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="File">File</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Action">Action</div>
              </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.fixedDocs}" var="docs">
                <tr>
                    <td>{!docs.Label}</td>
                    <td>{!docs.__Document_Type__c}</td>
                    <td>{!docs.__State__c}</td>
                    <td>{!docs.__Firmatari__c}</td>
                    <td><lightning:input aura:id="file" type="file" label=" " name="file" multiple="true" accept=".pdf, .doc, .docx" onchange="{!c.save}"/></td>
                    <td><lightning:button label="" iconName="utility:delete" iconPosition="left"/></td>
                </tr>
            </aura:iteration>
            <c:OrganizeEnvelopeRow />
            {!v.body}
        </tbody>
    </table>
</aura:component>

Answer 1

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.

Answer 2

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.

Answer 3

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;

}

Answer 4

The correct way is to put the following code in the css of the aura bundle:

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

Including that css in the <style> tag won't work.

Answer 5

EDIT:

At present, there are only two options for Lightning modals.

• The "Default" modal will get as wide as 50% of the viewport, but includes a minimum and maximum width to avoid going too narrow or too wide. Once the content causes the modal to reach full height, the area will begin to scroll (currently not applicable to Salesforce1 mobile).
• The "Large" modal changes width to occupy 90% of the viewport. It uses a wider minimum width and no maximum width. It's height follows the same behavior and style of other modals.

Below is some information on Modals from the documentation. See the documentation for even more on Modal usage and related CSS guidance.

Expected markup:

• Modal has role="dialog"
• When the modal is open, everything behind it has HTML attribute aria-hidden="true", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"/aria-hidden="false" on the main page's wrapper depending on whether or not the modal is open.
• Modal contains an HTML heading
• Modal has an aria-labelledby attribute whose value is the id of the modal’s heading

SLDS CSS classes that can be applied to create modals:

CLASS NAME_________________________USAGE

• .slds-modal ----------------------> <div> (Required)
• .slds-fade-in-open ---------------> .slds-modal (Required)
• .slds-modal--large ---------------> .slds-modal (Optional)
• .slds-modal__container -----------> <div> (Required)
• .slds-modal__header --------------> <div> (Required)
• .slds-modal__close ---------------> .slds-button (Required)
• .slds-modal__content -------------> <div> (Required)
• .slds-modal__menu ----------------> <div> (Required)
• .slds-modal__footer --------------> <div> (Required)
• .slds-modal__footer--directional -> .slds-modal__footer (Optional)
• .slds-backdrop -------------------> <div> (Required)
• .slds-modal-backdrop -------------> <div> (Required)
• .slds-backdrop--open -------------> .slds-modal-backdrop (Required)
• .slds-modal-backdrop--open -------> .slds-modal-backdrop (Required)

As you can readily see, there's a great deal of SLDS CSS missing from your code.

Answer 6

If you dynamically create a modal, then the modal component css won't work. I tried to add the following style code in component page, then works. ( Lightning Component version 41 will work, 42 won't allow you to put style tag in component).

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

Piece of my dynamic creation modal code, just for your reference.

        $A.createComponent(componentName, params,
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   modalBody = content;
                                   component.getSuper().find('overlayLib').showCustomModal({
                                       body: modalBody, 
                                       showCloseButton: true,
                                       cssClass: "",
                                       closeCallback: _closeCallback
                                   })
                               }
                           });

Answer 7

1) Create this static resource: QuickActionModalStyle

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

Adjust width as per your requirements.

2) Use this new static resource with at the beginning of your component.

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

Answer 8

If you put the following code in to the CSS and put it in the static resource and include you can see that the lightning action modal box width might be adjust and at the same time when you click the App Launcher button then that modal box also affect via the following snippet,

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

Try to put the modal__container CSS like below will solve that issue as well.

.slds-modal__container{
    width:90%;
    max-width: none;
    min-width: 40rem;
    height: 100%;
    padding: 3rem 0;
}