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
Joseph RosarioJoseph Rosario 

How do I set a Lightning component height to 100% of the tab

I'm struggling with having my component resize to 100% of the tab.

I tried using slds-grid--frame but this seems to create problems.
<div id="mainfrm" class="slds-grid slds-grid--frame slds-grid--vertical slds-scrollable_none" >

Any help or examples would be a great help.

User-added image
Raj VakatiRaj Vakati
<div id="mainfrm" class="slds-grid slds-grid--frame slds-grid--vertical slds-scrollable_none widthtemp" >
  
.THIS .widthtemp{
 width: 100%!important;
}

 
Joseph RosarioJoseph Rosario
My issue is with height and width.  Actually the problem is when I use slds-grid--frame, I get a size that goes is far too wide and too high .  This happens even with a style of width:90%; height:90%. 

If I remove slds-grid--frame, the width is perfect but the height does not resize to the height of the tab.
I tried adding a style with height:100% but it does not work.

See below..

User-added image

 
Sunil MadanaSunil Madana
Hi Joseph,
Try using CSS calc to find screen height and extend it. 
.THIS .widthtemp {
    height: calc(100%);
    height: -moz-calc(100%);
    height: -webkit-calc(100%);
}
Hope the above solution helps.