Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
rtriggrtrigg 

How to make a lightning:layoutItem scrollable?

I’ve got a layout containing two side-by-side layout items, each taking half of the screen.  How do I make each layoutItem have its own scrollbar as opposed to one scrollbar for the whole layout?
 
I tried including divs with the slds-scrollable—y class, but no joy:
              
    <div class="c-container">
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="6">
                <div class="slds-scrollable--y">
                      ***LEFT-SIDE CONTENT HERE***
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" size="6">
                <div class="slds-scrollable--y">
                      ***RIGHT-SIDE CONTENT HERE***
                </div>
             </lightning:layoutItem>
        </lightning:layout>
    </div>

Am I missing something obvious?  Thanks!

- Randy
HansFischHansFisch
Not Sure why <div class="slds-scrollable--y"> is not working but you could also try limiting the vertical height of any of the lightning:layoutItem's that you want to have a scroll bar. HTML and Lightning is smart enough to know to add a scroll bar if everything does not fit. 

example:
Component.cmp 
<aura:attribute name="right" type="Aura.Component[]" />
<lightning:layout horizontalAlign="spread">
            <lightning:layoutItem flexibility="grow"
                                  class="slds-m-left_small slds-m-bottom_small limitVert">
                {!v.right}
            </lightning:layoutItem>
</lightning:layout>

Component.css 
.THIS .limitVert{
    max-height: 50vh;
    overflow: auto;
}

The "limitVert" css class is setting the lightning:layoutItem to 50vh Vertical Height and the Overflow Auto allows it to set the scroll bar. Let me know if you have questions and dont forget to mark best answer. 
rtriggrtrigg
Thanks, @HansFisch!  I was hoping not to hard-wire a vertical height limit for the layout items given that users of the interface have diverse screens, but this is an improvement on what I'm doing now; namely, using an slds-grid div instead of lightning:layout, where I hard-wire heights into the two sub-divs anyway (along with the slds-scrollable--y class).

- Randy