function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AichaSFAichaSF 

Quick Action - lightning component- Width

Hello, 
I have quick action - lightning component and I want to control width popup.
Can someone help me.
Ajay K DubediAjay K Dubedi
Hi Aicha,

I have added the below code for modal :
you can also adjust width of this popup using inline css with width properties (Ex- <div class="slds-modal__container" style="width:20%"> </div>)

<div aura:id="thecontainer" class="thecontainer" id="thecontainer">
        <div role="dialog" tabindex="-1" aria-labelledby="headermodal" class="slds-modal slds-fade-in-open slds-modal--large" >
          <div class="slds-modal__container">
            <div class="slds-modal__header">
              <h2 id="headermodal" class="slds-text-heading--medium">My Title</h2>
            </div>
            <div class="slds-modal__content slds-p-top--x-large slds-p-around--medium" aura:id="modalbody" id="modalbody">

                <!-- your component goes here -->

            </div><!-- modal -->
            <div class="slds-modal__footer">
                 <!-- Footer elements, if required -->
            </div>
          </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
    </div> 

Hope this solution helps.

Thank You
Ajay Dubedi
AichaSFAichaSF
Thank your for replaying, 

I Tried this code but I cannot increase width popup.
User-added image
Raj VakatiRaj Vakati
Update styles
https://developer.salesforce.com/forums/?id=9060G000000BfHPQA0 
<style>
        .slds-modal__container{
               max-width: 70rem !important;
               width:90% !important;
               
        }
    </style>

 
S_RathS_Rath
Hi,

You can try the below code and give the css in <aurs:html> tag

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader" access="global" >
    <!--Style-->
    <aura:html tag="style">
        .slds-modal__container{
        height : auto;
        width: 70%;
        max-width: 70rem;
        }
        .modal-body{
        height : 500px !important;
        max-height: 500px !important;
        }
        
        .customFooter{
        display: inline !important;
        }
    </aura:html> 
    
    <!--Header-->
    <div class="modal-header slds-docked-form-header slds-modal__header ">
        <h4 class="title slds-text-heading--medium" >New Contact</h4>
    </div>
    
    <!--Content-->
    <div class="slds-modal__content slds-p-around_x-small" style="max-height : 400px; overflow-y:scroll;">
        <aura:if isTrue="{!!v.saved}">
            <lightning:recordEditForm
                                      onload="{!c.handleLoad}"
                                      onsubmit="{!c.handleSubmit}"
                                      onsuccess="{!c.handleSuccess}"
                                      objectApiName="Contact">
                <!-- the messages component is for error messages -->
                <lightning:messages />
                <div class="slds-grid slds-wrap">
                    <div class="slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="FirstName" />
                        <lightning:inputField fieldName="LastName" />
                    </div>
                    <div class="slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="Phone" />
                        <lightning:inputField fieldName="AccountId" />
                    </div>
                    <div class="slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="OtherPhone" />
                        <lightning:inputField fieldName="Fax" />
                    </div>
                     <div class="slds-size_1-of-2 slds-p-around_medium">
                          <lightning:inputField fieldName="Description" />
                         <lightning:inputField fieldName="Birtdate" />
                    </div>
                    <div class="slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="ReportsToId" />
                        <lightning:inputField fieldName="Title" />
                    </div>
                    
                     <div class="slds-size_1-of-2 slds-p-around_medium">
                        <lightning:inputField fieldName="OtherAddress" /> 
                    </div>
                </div>
                
                <!--Footer-->
                <div class="slds-m-top_medium">
                    <div class="slds-docked-form-footer slds-modal__footer customFooter" style="height:55px;">
                        <div style="float:right;">
                            <lightning:button label="Cancel"  onclick="{!c.closeQuickAction}" /> 
                            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
                        </div> 
                    </div>          
                </div>
            </lightning:recordEditForm>
            <aura:set attribute="else">
                <p>Saved! New record id is {!v.recordId}</p>
            </aura:set>
        </aura:if>
    </div>
</aura:component>



Screeshot of the above code

Save button in Footer

Please mark this as solved if it helps you out so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thank You


 
Nilesh ANilesh A
Hi @S_Rath
Your solution worked for me. Thanks a lot.

<style> not allowed in cmp.
so <style> .slds-modal__container{ max-width: 70rem !important; width:90% !important; } </style> did not work
Adding in CSS also did not work
 
Koutilya Tej YaramadKoutilya Tej Yaramad
HI ,

for quick action component implement = "force:lightningQuickActionWithoutHeader" or "force:lightningQuickAction"

To control width : change the value at width.
To control height  : change the value at height .

In this way, you will get the pop at the center of the window even at any resolution and zoom in/out.

 Add the following tag in the component which is invoked by the quick action. 
<aura:html tag="style">
        .slds-modal__container{
        width: 55%;
        max-width: 60rem;
        }
        .modal-body{
        height : 400px !important;
        max-height: 550px !important;
        }
    </aura:html>
if you add height in "slds-modal__container" the pop up sticks to the top of the window.

Definitely works

Thank you
Harish Kumar 57Harish Kumar 57
Very useful with loading css