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
bretondevbretondev 

How to increase Lightning Component height?

Hello

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?
bretondevbretondev
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>        

    <aura:component>
    <div class="slds-m-around_large">body</div>//"slds-m-around_small","slds-m-around_x-small" you can also use this.
    or
        <div style="width:90%;"> body</div>
        
    </aura:component>
    
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.

   http://www.lightningdesignsystem.com/utilities/sizing/     
   
   http://www.infallibletechie.com/2016/07/how-to-set-properties-in-custom.html
     
        
               
Please mark it as best Answer if you find it helpful.


Thank You
Ajay Dubedi
bretondevbretondev
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...

</div>

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">
        .slds-modal__container{
        width: 80% !important;
        max-width: 80% !important;
        }
        
        .slds-modal__header h2{
        font-weight: 500 !important;
        font-size: 1.7rem;
        }
    </aura:html>

to increase the modal size

Hope it helps!