Set width of modal window of lightning action

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 flexibility="auto" padding="around-small" size="6">
                <aura:text value="Descrizione Plico: "/>
                <aura:text value="{!v.plico.Name}"/>
    <aura:text value="Elenco Documenti"/>
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <tr class="slds-text-title--caps">
              <th scope="col">
                <div class="slds-truncate" title="Nome documento">Nome documento</div>
              <th scope="col">
                <div class="slds-truncate" title="Tipologia Documento">Tipologia Documento</div>
              <th scope="col">
                <div class="slds-truncate" title="Stato">Stato</div>
              <th scope="col">
                <div class="slds-truncate" title="Firmatari">Firmatari</div>
              <th scope="col">
                <div class="slds-truncate" title="File">File</div>
              <th scope="col">
                <div class="slds-truncate" title="Action">Action</div>
            <aura:iteration items="{!v.fixedDocs}" var="docs">
                    <td><lightning:input aura:id="file" type="file" label=" " name="file" multiple="true" accept=".pdf, .doc, .docx" onchange="{!}"/></td>
                    <td><lightning:button label="" iconName="utility:delete" iconPosition="left"/></td>
            <c:OrganizeEnvelopeRow />


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

 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

     max-width: 70rem !important;
     width:70% !important;

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;

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

Source : Link , Question Author : DarkSkull , Answer Author : Daniel Collier

Leave a Comment