Lightning Component Height/Width Adjustment

  • 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.

  • 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:

    .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.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM