4

I am developing a lightning component to drag-and-drop some items. It is called from a quick action on a record detail page. What I have noticed is that if the divs inside of it are too large, the entire component will start scrolling. What I want is that left-hand side and a right-hand sides scroll separately.

Screenshot:

enter image description here

When it's viewed on a large enough screen(or with low amount of items) it is fine. However, when the screen size changes:

enter image description here

I am not able to drag the "Fwd: Shizzle" onto "Other" anymore.

Code:

<aura:component description="MyLightningPopup" implements="force:lightningQuickAction,flexipage:availableForAllPageTypes,force:hasRecordId" controller="MyApexController">
    <aura:attribute name="contentDocuments" type="ContentDocument[]" />
    <aura:attribute name="fileWraps" type="MyApexController.FilesWrapper[]" default="[]"/>

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

    <div class="slds-grid slds-wrap">
        <!-- Left hand side -->
        <div class="slds-size--1-of-2">
            <section class="accordion">
                <aura:iteration items="{!v.contentDocuments}" var="obj">
                    <div id="{!obj.Id}" draggable="true" ondragstart="{!c.drag}">
                        <input type="checkbox" name="accordion-role" id="{!obj.Id + '_rad'}" />
                        <label for="{!obj.Id + '_rad'}">
                            <lightning:button label="Delete" variant="destructive" onclick="{!c.handleDeleteRecord}" value="{!obj.Id}"/> {!obj.Title}
                        </label>
                        <article>
                            <lightning:fileCard fileId="{!obj.Id}"/>
                        </article>
                    </div>
                    <br/><br/>
                </aura:iteration>
            </section>
        </div>
        <!-- Right hand side -->
        <div class="slds-size--1-of-2" align="center" id="dropzone">
            <section class="accordion">
                <aura:iteration items="{!v.fileWraps}" var="obj">
                    <div id="{!obj.fileId == null ? obj.fileName : obj.fileId}" draggable="{!obj.fileId == null ? false : true}" ondragstart="{!c.drag}" ondrop="{!c.drop}" ondragover="{!obj.fileId == null ? c.allowDrop : c.doNothing}">
                        <input type="checkbox" name="accordion-role" id="{!obj.fileName + '_rad'}" disabled="{!obj.fileId == null || obj.fileId == ''}" />
                        <label for="{!obj.fileName + '_rad'}">
                            {!obj.fileName}
                        </label>
                        <article>
                            <lightning:fileCard fileId="{!obj.fileId}"/>
                        </article>
                    </div>
                    <br/><br/>
                </aura:iteration>
            </section>
        </div>
    </div>
</aura:component>
7

Salesforce Lightning Design System has a tag built in for just this purpose. You should be able to add the .slds-scrollable_y class to your divs that hold the left hand side and the right hand side. You may need to also set the height of those divs to a fixed height.

Documentation on the scrollable classes can be found here.

As mentioned by sfdcfox in the comments, you can also use the ui:scrollerWrapper component instead of writing the css yourself. One cool benefit of that component that isn't really applicable in this use-case is that it has a 'scrollTo' method that let's you scroll the content to a specific location.

1
  • 1
    Alternatively, ui:scrollerWrapper. – sfdcfox Jun 5 '18 at 14:45
3

You can try applying .slds-scrollable_y CSS to each of the two divs as they currently are, but I'm not certain that will provide the results that you're looking for.

I strongly suspect the way to achieve what you're asking is to put the Left and Right parts of your component into separate containers (apply the .slds-scrollable_y to each of them) that have their own accordions and then wrap them inside an outer component. That should definitely allow you to scroll the left component and the right component independently.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.