How to make inner divs scrollable in a lightning component?

3.8K    Asked by makram_8714 in Salesforce , Asked on Aug 22, 2021

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 the left-hand side and the right-hand sides scroll separately.


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.


<!-- Left hand side -->
<input type="checkbox" name="accordion-role" id="{!obj.Id + '_rad'}">

<!-- Right hand side -->
<input type="checkbox" name="accordion-role" id="{!obj.fileName + '_rad'}" disabled="{!obj.fileId == null || obj.fileId == ''}">

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.

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.

You can make div scrollable as follows:

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. < div class = "scroll">It is a good platform to learn programming.

Your Answer


Parent Categories