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.
Answer (1)
To make inner divs scrollable within a Lightning Component, you can use CSS to define the desired scrolling behavior. Here's a basic example of how you can achieve this:
And in your CSS file:
.THIS .outer-container {
/* Set the height and width of the outer container */
height: 300px; /* Adjust as needed */
width: 100%; /* Adjust as needed */
overflow: auto; /* Enable scrolling */
}
.THIS .inner-container {
/* Set the height and width of the inner container */
height: 500px; /* Adjust as needed */
width: 100%; /* Adjust as needed */
/* Other styles for inner content */
}In this example:
- The outer container (div.outer-container) defines the dimensions of the visible area. It has a fixed height, and if the content inside it exceeds this height, it will become scrollable vertically.
- The inner container (div.inner-container) contains the content you want to display. It should have dimensions larger than the outer container if you want scrolling to occur.
- By setting overflow: auto; on the outer container, you enable scrolling when the content exceeds the container's dimensions.
Adjust the height, width, and other styles according to your requirements.
Remember to replace .THIS with the appropriate namespace if you're using Salesforce Lightning Components. Also, consider responsive design and usability aspects when defining dimensions and scrolling behavior.
7 Months