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>
                <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>
    

    Are you using LDS in the code for your pop-up?

    no, I only use `lightning:*` tags. The popup is opened by an action button in the detailed page of my record. Ok?

    @crmprogdev If I use LDS, is there a way to resolve this problem?

  • DarkSkull

    DarkSkull Correct answer

    3 years ago

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM