How to increase the width of Quick action Modal/Popup?

Hello and welcome! 😀

In this article, we shall learn how we can increase with the width of the Quick Action Modal/Popup using an unconventional method/hack. Using this, we can also increase the width of the flow screens! 😀

So without wasting any time, let’s get to it!

Step 1: Create a static CSS resource.

To begin with, we will need to create a CSS file and upload it as a static resource in our org.


	width: 80% !important;
	max-width: 80% !important;

Step 2: Create a lightning component.


<aura:component implements="force:lightningQuickAction,lightning:availableForFlowScreens" >
    <ltng:require styles="{!$Resource.ModalWidthCSS}"/>
    <div class="slds-align_absolute-center">
        <div align="center" class="slds-page-header__name">
            <div class="slds-page-header__name-title">
                <span class="slds-page-header__title slds-truncate" >Hola Ohana! xD</span>

Step 3: Create a Quick action to call the lightning component.

Time to see it in action!

Things to keep in mind!

Every hack has a downside, and so does this one.
This CSS-hack would apply everywhere in the app once the component gets loaded/called. So every Modal (Edit record, new record, …) would take the 80% width. Also, if you have any custom components using the standard ‘slds-modal__container’ CSS class, then they will also experience the same change.

7 thoughts on “How to increase the width of Quick action Modal/Popup?

  1. Hi Narender, thanks for this post ! Worked perfectly for me.
    About the downside, the CSS effect disappear after refreshing the page so that’s fine for me 😉
    Cheers !


  2. Nice! But if you don’t refresh browser after appearing it, this specified width will effected continue to other pop-up such as Create New Account, right?


  3. To make it consistent everywhere, just create a dummy lightning component which has below code:
    **************************************** Code Starts**************************************************************

    **************************************** Code Ends**************************************************************
    Place it on lightning page. With this, whenever record is loaded, Lighting component overrides the actual css and all actions look same all the time.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.