Lightning Layout & Layout Item Question

lightning-aura-componentslightning-layoutsslds-grid

We have this sort of complex layout item design and my issue is some of the elements keeps going in to the next line.

enter image description here

<lightning:layout>
   <lightning:layoutItem size="12">
     Title Header
   </lightning:layoutItem> 
   <lightning:layoutItem size="4">
     Some Long Text
   </lightning:layoutItem> 
   <lightning:layoutItem size="8">
      <lightning:layout>
      <lightning:layoutItem size="12">
               Instruction Text
          </lightning:layoutItem>
      <lightning:layoutItem size="4">
               Some Widget
          </lightning:layoutItem>
      <lightning:layoutItem size="8">
               <lightning:layout>
          <lightning:layoutItem size="12">
                   Dropdown
              </lightning:layoutItem>
          <lightning:layoutItem size="6">
                   Legends
              </lightning:layoutItem>
          <lightning:layoutItem size="6">
                   Button
              </lightning:layoutItem>


               </lightning:layout>


          </lightning:layoutItem>
      </lightning:layout>
     
   </lightning:layoutItem> 

</lightning:layout>

But what is happening, is the Dropdown, Legends and Button is going on the next line like the screenshot below, am I missing anything? Any guidance is appreciated.

enter image description here

Best Answer

Mostly, you forgot about multiple-rows (in Aura, multipleRows="true").

I fixed your layout in LWC:

<template>
    <lightning-layout multiple-rows class="slds-grid_vertical-stretch">
        <lightning-layout-item size="12">
            Title Header
        </lightning-layout-item>
        <lightning-layout-item size="4">
            Some Long Text
        </lightning-layout-item>
        <lightning-layout-item size="8">
            <lightning-layout multiple-rows>
                <lightning-layout-item size="12">
                    Instruction Text
                </lightning-layout-item>
                <lightning-layout-item size="4">
                    Some Widget
                </lightning-layout-item>
                <lightning-layout-item size="8">
                    <lightning-layout multiple-rows>
                        <lightning-layout-item size="12">
                            Dropdown
                        </lightning-layout-item>
                        <lightning-layout-item size="6">
                            Legends
                        </lightning-layout-item>
                        <lightning-layout-item size="6">
                            Button
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-layout-item>
    </lightning-layout>
</template>

Which you can see here.

Related Topic