Lightning Component List inside Component

Question

I'm trying to create a scrollable list of components inside another component. I'm using a card view to contain my info. When I try the following code, I get a weird result with the scrollable view.

<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[]"/>

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

</aura:component>

The result I get is this where the scroll bar is all the way off in no-man's land.

I was looking for this where its an invisible scroll or at least on the left without all that padding.

Answer 1

Your div is taking all available width while your cards (c:ContentCard) are having their widths limited somehow. That's the reason why you have the gap between your cards and the scroll bar. I would recommend you to: 1) Remove the width limit from the ContentCard component and; 2) Delegate to a higher component the responsibility to organize the distribution of components on the page. You can control the structure of components with slds-grid and slds-col lightning classes.

Answer 2

</lightning:card>

Use the Lightning cads.

For Your Refrence https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example