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
NeedHelp55NeedHelp55 

Width Adjustment in Lightning quick action.

Hi,
I am stuck with the width of modal window pos up when someone clicks on a quick action. I saw there is a option to adjust the height.
But i am not able to adjust the width of modal window at all. Tried all possibilities.

Kindly help me on this.
Best Answer chosen by NeedHelp55
Suraj PSuraj P
Create a parent component with the following markup and add your child component in the placeholder specified. Invoke the parent component in the lightning action:
  
<div aura:id="thecontainer" class="thecontainer" id="thecontainer">
        <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal--large" >
          <div class="slds-modal__container">
            <div class="slds-modal__header">
              <h2 id="header43" 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>

If this answer helps, please mark it as the best answer.

All Answers

NagendraNagendra (Salesforce Developers) 
Hi,

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)
Hope this helps.

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

Thanks,
Nagendra
NeedHelp55NeedHelp55
Hi Nagendra,

Thanks for the valuable information.
But i am using the standard modal window in Lightning .
I have created one Action on my custom object. Associated the same with one lightning componenet and set the height to 250 px but there is no opiton to set the width. 

I have total of 11 output and 2 input field that need to displayed in UI. But as there is no option set the width and with 13 fields the page started to scroll horizontally.

My requirement is to adjust all of them in one window.
Suraj PSuraj P
Create a parent component with the following markup and add your child component in the placeholder specified. Invoke the parent component in the lightning action:
  
<div aura:id="thecontainer" class="thecontainer" id="thecontainer">
        <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal--large" >
          <div class="slds-modal__container">
            <div class="slds-modal__header">
              <h2 id="header43" 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>

If this answer helps, please mark it as the best answer.
This was selected as the best answer
NeedHelp55NeedHelp55
Thanks a lot Nagendra and Suraj.

I have added the below code for modal :

Lightning Component :
confirmsubmission:
​<aura:component >
    <aura:attribute name="isActive" type="Boolean" default="false" required="true" />
    <aura:handler name="init" value="{!this}" action="{!c.openmodal}"/>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="header43" class="slds-text-heading--medium errorDiv">Disclaimer</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium allignButton">
                <div>
                    <p> Once you submit the reconciliation you will no longer be able to edit the Count.</p>
                </div>
            </div>
            <div class="slds-modal__footer allignButton">
                <lightning:button label="Continue" class="slds-button_brand" onpress="add method"/>
                <lightning:button label="Cancel" class="slds-button_brand" onpress="add method"/>
            </div>
        </div>
           
    </div>
   
   <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

JS :

({
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
    },
    openmodal: function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    }

})

Main Component :

<aura:if isTrue="{!v.modalActive == true}">    
        <c:ConfirmSubmission/>
</aura:if>    
Sanjay Rathore5Sanjay Rathore5

 Go to your Component page......

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