+ Start a Discussion

How to increase Lightning Component height?


I have a Custom Button that triggers displaying of a Lightning Component.
In the Custom Button, I can specify height but not width of the component.

User-added image

Currently, the width of the Lightning Component takes 50% of the screen but I want 90%.

How can I achieve that?
Sorry, in the title I meant "width", not "height"
Ajay K DubediAjay K Dubedi
Hi Bret,

1- You can use main <div> body of hole page </div>        

    <div class="slds-m-around_large">body</div>//"slds-m-around_small","slds-m-around_x-small" you can also use this.
        <div style="width:90%;"> body</div>
2- If you used a lightning tag. You can define this.
    <lightning:layout class= "widthclass"> body </lightning:layout>
The first one is to edit the component's style sheet
    .THIS .widthclass{
     width: 90%;
3- You can also check below URL.

Please mark it as best Answer if you find it helpful.

Thank You
Ajay Dubedi
Hi Ajay,

i tried your solution #1 but it does not work.
The Component width is still not even 50% of the page.

This is the code I have put :
<div class="slds-m-around_large">

	//My body goes here...


This is how the component displays, you see width is very small :

User-added image

Yash ShuklaYash Shukla
If it is a Quick Action that renders a Lightning Component use 
 <aura:html tag="style">
        width: 80% !important;
        max-width: 80% !important;
        .slds-modal__header h2{
        font-weight: 500 !important;
        font-size: 1.7rem;

to increase the modal size

Hope it helps!