1

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

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
3
  • Thank you! That definitely did the trick.
    – jojopogi
    Dec 8, 2021 at 19:14
  • @sfdcdox - I'm still having the same issue, on the desktop it looks correct, but in the iPad in landscape mode, it looks like the 2nd screenshot I had.
    – jojopogi
    Dec 8, 2021 at 20:16
  • 1
    @jojopogi you may need to adjust your grid for various device sizes. If there's too much content, you can't fit it all in the space.
    – sfdcfox
    Dec 9, 2021 at 2:19

You must log in to answer this question.

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