How to make inner divs scrollable in a lightning component?
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.
Screenshot:
When it's viewed on a large enough screen(or with low amount of items) it is fine. However, when the screen size changes:
I am not able to drag the "Fwd: Shizzle" onto "Other" anymore.
Code:
<!-- 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.