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
Kevin GutierrezKevin Gutierrez 

Modal size in lightning action

I created a lightning component which is a form for editing a related list on an object. I created a lightning action for the component in the object record details page in salesforce. My problem is that the modal the component shows in when the action is clicked has a small width, and the details for each list item become squished/truncated. Is there a solution/alternative for increasing the width of the modal the lighting component appears in?
James LoghryJames Loghry
The modal is set to a relative width, which in your case is the width of the quick action that opens up.  There are two things you can do to fix this:
  1. Force the quick action window to be wider, such as adding a div with a width of 600px as an example.
  2. Muck with the CSS or styles of the modal
For option 2, the SLDS modal has a div with a class "slds-modal__container".  This class has the following CSS properties:
  • width: 50%
  • max-width: 40rem;
  • min-width: 20rem;
You can see this for yourself if you go to the modals page at www.lightningdesignsystem.com and open up the DOM inspector in your browser:
User-added image

If you add a css class or style to that container div and override the CSS, you should be able to make the modal presentable. 
Mustafa JhabuawalaMustafa Jhabuawala
Hi Kevin,

Salesforce provided option to customize the height of the pop up while creating an action button. But unfortunately there is no option for width.

I have tried multiple ways to increase the width but none of them is full proof. I have written a javascript code which is executed on component load and finds the html element with a specific class and increase the width by setting attribute, but this does'nt work in all case.

So for now there is no option to increase width of a popup.

But what you can do is, if your form is big enough then create one tab in record home page and add that component in the tab itself using lightning app builder.

Hope this helps..

Note - Kindly mark this answer as a best answer if this helped you, so that other's can also get benefit from it.

Thanks,
Mustafa Jhabuawala
Technical Lead at Zen4orce (http://www.zen4orce.com)
brahmaji tammanabrahmaji tammana
Vote for this idea - https://t.co/5cdIhMUQ9x
Dheeraj SharmaDheeraj Sharma

Hi Kevin,

There is very simple solution to your problem.

steps to increase your quick action width.

step1)  Create css file and mention width according to your pop-up modal.Check below css code

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


and Add tis css file into your static resource. the more size you want more rem you can add.

Setp2) now include your css file into your lightning component.

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


Things to consider:

1) You cannot include this CSS in script tage as this is no more supported after spring'18.

2) Don't put this css into your component stylesheet file. (as in the case of this Std style sheet will override your css.)

Thanks select this answer as best if this solve your query.

Thanks,
DCool 
Gullu SfGullu Sf
Hi Dheeraj, I've followed your steps to increase the width of the Modal in lightning Action. Its working perfectly. The issue here is, well it is not an issue but whenever I open any other lightning action, the popup size is defaulted to what I specified in the css file. For Example, If I click Edit, or Change Record Type or delete action, the modal size becomes Larger. As a standard feature these actions should open the popup in standard modal size ryt, I dont know how these actions are invoking the css file I created. Did you find this issue with yourself as well?
Sarah BrockSarah Brock
Hi, I have also implemented this modal change, which nearly works beautifully. But as above I also have the issue with all lightning actions now displaying with the increased width. Did you ever find a solution?