function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alex Miller 93Alex Miller 93 

List of Components Scroll

Hi! I'm trying to figure out why my scroll functionality isn't behaving the way I want it to. I have this component sitting as the parent:
  
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ContentListController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Global decleration for the Content Id selected -->
    <aura:attribute name="ContenList" type="Content__c[]"/>

    <!-- this section!! -->
    <div style="max-height: 400px;overflow-y: auto;">
        <aura:iteration items="{!v.ContenList}" var="store">
            <c:ContentCard content="{!store}" duration="1" />
        </aura:iteration>
    </div>
    <!-- this section!! -->

</aura:component>
I'm loading a list of object records into this iteration. Then I'm wanting to contain them like the diagram shows where the list of components would be 5 or 6 cards visible at a given time. Then anything overflowing would require scrolling.

User-added image

But I'm getting this result:

User-added image

 
Best Answer chosen by Alex Miller 93
Khan AnasKhan Anas (Salesforce Developers) 
Hi Alex,

Greetings to you!

You can use ui:scrollerWrapper that enables native scrolling in Lightning Components Salesforce1 app as well as in Lightning Desktop.

A ui:scrollerWrapper creates a container that enables native scrolling in the Salesforce app. This component enables you to nest more than one scroller inside the container. Use the class attribute to define the height and width of the container. To enable scrolling, specify a height that's smaller than its content.

Component: 
<aura:component>
    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
    </ui:scrollerWrapper>
</aura:component>

CSS: 
.THIS.scrollerSize {
    height: 300px;
}

Along with it, you can use SLDS class="slds-scrollable"

Please refer to the below links which might help you further with the above issue.

https://developer.salesforce.com/docs/component-library/bundle/ui:scrollerWrapper/documentation

https://www.lightningdesignsystem.com/utilities/scrollable/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas