2

I am using the lightning:layout and lightning:layoutItem components to build a new lightning page. It is a basic layout with only two columns. I'd like the two columns to be the same height, but their height is currently governed by their individual content.

lightning:layoutItem has a 'flexibility' attribute which allows you to define the horizontal behaviour of these columns. Is there an equivalent for the vertical alignment of columns?

<lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="centre">
    <!--Header - Progress Indicator-->
    <lightning:layoutItem size="8"  flexibility="auto">
        <div class="slds-card" style="height:100%">
            <c:PlatformMessageFormProgressIndicator currentPage="{!v.currentPage}"/>
            Platform Message Actions (Save, Next, Previous, Cancel)
        </div>
    </lightning:layoutItem>   
    <!--Right Panel - Message Preview Window -->
    <lightning:layoutItem size="4" padding="horizontal-small" flexibility="auto">
        <div class="slds-card" style="height:100%">
        <c:PlatformMessageFormPreviewWindow messageType="{!v.messageType}" currentDateTimeString="{!v.currentDateTimeString}"/>
            </div>
    </lightning:layoutItem>
</lightning:layout>
  • Did you end up figuring this out? – Peter Luo Dec 1 '19 at 19:14
0

You need to use verticalAlign="stretch" in lightning:layout and should have lightning-layout-item flexibility="auto". Below is a sample code from Salesforce Documentation:-

<aura:component>
    <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning:layout verticalAlign="stretch" multipleRows="true" class="x-large">
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                1
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                2
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                3
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                4
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

You can have a detailed look here:- Lightning Layout Vertical Align Stretch

| improve this answer | |

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.