1

I'm trying to see if this layout is possible with lightning layout without thinkering about the positioning via CSS. Basically, what I'm trying to do is to line up the content C layout with the green component (fixed height/width). Something like below screenshot. I tried alignmentBump="end" and played around slds-grid_vertical-align-end and slds-align-bottom but I'm not able to achieve what I am trying to do. It sounds simple, and I'm sure i'm just missing something. Any guidance would be appreciated.

enter image description here

<lightning:layout multipleRows="true" verticalAlign="stretch">
   <lightning:layoutItem size="12">
     Title Header
   </lightning:layoutItem> 
   <lightning:layoutItem size="4">
       <lightning:layout multipleRows="true">
             <lightning:layoutItem size="12">
                 A
             </lightning:layoutItem>
             <lightning:layoutItem size="12">
                 B
             </lightning:layoutItem>
             <lightning:layoutItem size="12" alignmentBump="bottom">
                 C <!-- This content, should align at the bottom of the fixedHeightWidth Component -->
             </lightning:layoutItem>
       </lightning:layout>
   </lightning:layoutItem> 
   <lightning:layoutItem size="8">
      <c:fixedHeightWidthComponent />
   </lightning:layoutITem>
</lightning:layout>
Improve this question

1 Answer 1

Reset to default
4

The alignmentBump="bottom" should be on the item containing B, it has to bump the next item to the bottom. Besides that, the inner lightning:layout should get the slds-grid_vertical class and a height of 100% for this to work.

I made this as an example to test. It's lwc though, not aura, but it should work the same:

<template>
    <lightning-layout multiple-rows="true" vertical-align="stretch">
        <lightning-layout-item size="12">
            <div style="background-color: blue">Title Header</div>
        </lightning-layout-item>
        <lightning-layout-item size="4">
            <lightning-layout multiple-rows="true" class="slds-grid_vertical" style="height: 100%">
                <lightning-layout-item size="12"><span style="background-color: orange">A</span></lightning-layout-item>
                <lightning-layout-item size="12" alignment-bump="bottom"><span style="background-color: orange">B</span></lightning-layout-item>
                <lightning-layout-item size="12"><span style="background-color: orange">C</span> </lightning-layout-item>
            </lightning-layout>
        </lightning-layout-item>
        <lightning-layout-item size="8">
            <div style="height: 400px; background-color: green;"></div>
        </lightning-layout-item>
    </lightning-layout>
</template>
Improve this answer
1
  • This worked perfectly! Thank you
    – jojopogi
    Dec 13, 2021 at 18:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .