Lightning Component Height/Width Adjustment

Question

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?

Thanks!

Answer 1

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");
}

Answer 2

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:

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

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