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.

CODE:

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

Step 2: Create a lightning component.

ModalWidthComponent.cmp

<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"> <h1> <span class="slds-page-header__title slds-truncate" >Hola Ohana! xD</span> </h1> </div> </div> </div></aura:component>

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.