How to increase quick action width and height in lwc

 Hello Guys,

Today in this post we are going to learn about HOW TO INCREASE QUICK ACTION WIDTH AND HEIGHT IN LIGHTNING WEB COMPONENT. In aura quick action type there is a option to increase height  but when LWC quick action comes, there is no option to increase Height And Width of action button.I think increase height/width option should be in quick action but no worries we have found out some alternative to do it.

This Post will help you to increase width and height of quick action button of  lwc.
In this post you will learn about add dynmic css from js.

Let's Start

Step 1 : customTableQuickActionLwc.Html

<template>
    <div class="c__class slds-m-around_large">
<div class="c__customHeader">
    <h1 class="c__mainHeader">sfdcfamily.blogspot.com</h1>
    <p>How To Increase Width And Height Of Lightning Quick Action Button</p>
</div>
        
    <table class="slds-table slds-table_cell-buffer slds-table_bordered"
        aria-label="Example default base table of Opportunities">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>                       
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Account Name">Account Name</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Close Date">Close Date</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Stage">Stage</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Confidence">Confidence</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Amount">Amount</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Contact">Contact</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="slds-hint-parent">
                <th data-label="Opportunity Name" scope="row">
                    <div class="slds-truncate" title="Cloudhub">
                        <a href="#" tabindex="-1">Cloudhub</a>
                    </div>
                </th>
                <td data-label="Account Name">
                    <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                </td>
                <td data-label="Close Date">
                    <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                </td>
                <td data-label="Prospecting">
                    <div class="slds-truncate" title="Prospecting">Prospecting</div>
                </td>
                <td data-label="Confidence">
                    <div class="slds-truncate" title="20%">20%</div>
                </td>
                <td data-label="Amount">
                    <div class="slds-truncate" title="$25k">$25k</div>
                </td>
                <td data-label="Contact">
                    <div class="slds-truncate" title="jrogers@cloudhub.com">
                        <a href="#" tabindex="-1">jrogers@cloudhub.com</a>
                    </div>
                </td>
            </tr>
            <tr class="slds-hint-parent">
                <th data-label="Opportunity Name" scope="row">
                    <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
                        <a href="#" tabindex="-1">Cloudhub + Anypoint Connectors</a>
                    </div>
                </th>
                <td data-label="Account Name">
                    <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                </td>
                <td data-label="Close Date">
                    <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                </td>
                <td data-label="Prospecting">
                    <div class="slds-truncate" title="Prospecting">Prospecting</div>
                </td>
                <td data-label="Confidence">
                    <div class="slds-truncate" title="20%">20%</div>
                </td>
                <td data-label="Amount">
                    <div class="slds-truncate" title="$25k">$25k</div>
                </td>
                <td data-label="Contact">
                    <div class="slds-truncate" title="jrogers@cloudhub.com">
                        <a href="#" tabindex="-1">jrogers@cloudhub.com</a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

 </div>
</template>

Step 2 : customTableQuickActionLwc.Js

/*  Author : Ravi Soni
    Date   : 13 March 2022
    Content: Custom Table Quick Action Lwc
 */
import { LightningElement } from 'lwc';
export default class CustomTableQuickActionLwc extends LightningElement {
    connectedCallback() {
        var css = `
.slds-modal__container{
    width: 90% !important;
    max-width: 90% !important;  
      
}`
            ,
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');
        style.id = 'customStyleCss';
        head.appendChild(style);
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
    }
    disconnectedCallback() {
        document.getElementById('customStyleCss').remove();
    }
}

Note :

connectedCallback =>

In connectedCallback we are using custom css. by using this css we are ableto increase width of quick action button but this css is applying all of the quick actionbutton that's the reason we have to use disConnectedCallBack.

disConnectedCallBack =>

when user close quick action button at that time disConnectedCallBack works and remove this css so that this css will apply only for our component.

Step 3 : customTableQuickActionLwc.css

.c__class {
    height : 250px;
    max-height: 500px;
}
.c__customHeader {
    text-align: center;
    padding-bottom: 20px;
}
.c__mainHeader {
    font-size: 22px;
    font-weight: bold;
}

Note : We need to use this css for increase height of quick action modal.

Step 4 : customTableQuickActionLwc.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
</LightningComponentBundle>

Note : make available this component for lightning Quick Action button by add lightning__RecordAction target

Output : 

Resources : 

Data Table - Lightning Design System

If You have any doubt or suggestion related this post , please comment us and share your opinion with us. We respect your opinion .

I hope you Liked it.

Happy Learning