I would like to understand if there is a way to adjust the height of the lightning Component.

Went through the following articles and developer forum threads:

Want to change the height of the home page component dynamically

but no of much help.

Can anyone please assist me here?


  • Hi, were you able to accomplish this ? and how? I have a lightning components that has a force:canvasApp in it. and want to set height of the component dynamically such as if its in small width, then height is 1000, if medium height is 800, if large height is 600 etc. – Danish May 16 '18 at 23:56

One way is to bind an attribute to an inline stylesheet

<aura:attribute name="divHeight" type="Integer" default="100" />

<div onclick="{!c.changeHeight}" style="{! 'height:'+v.divHeight+'px;'}"></div> 

Then in your controller method you can change the height of the div

changeHeight: function(component, event, helper) {
  component.set("v.divHeight", "300");

Well there are two ways. The first one is to edit the component's style sheet. The .css file associated to it. You can find it at the right of the Developer console. In case you want the component to have a height of 600px, then you would include something like this:

    height: 600px;

The second way is to edit the individual heights of the component's elements and the component itself will adapt. That is as easy as changing the element's styles:

    <div style="height:600px;"></div>

Furthermore you could also make the elements change size dynamically by using attributes and the component's controller.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.