How to make inner Divs Scrollable in the Salesforce Lightning Component?

181    Asked by Aalapprabhakaran in Salesforce , Asked on Jul 31, 2023

I am creating a Salesforce lightning component to drag and drop few items. It is invoked from a fast action on a record detail page. However, if the divs inside are huge, the whole component begins scrolling. I want the left side and the right side to scroll separately. The screenshot is given below:

When the screen resolution changes, the screenshot looks different like the one given below:

It is not possible to drag the “Fwd: Shizzle”onto “other”.
The code is given below:
<!-- Left hand side --> 
<!-- Right hand side --> 
<input type="checkbox" name="accordion-role" id="{!obj.fileName + '_rad'}" </span>
Answered by Aashna Saito

 There is a tag built-in for Salesforce Lightning Design System. You must be able to include the .slds-scrollable_y class to the divs that have the left and right side. It may be needed to create the height of the divs to a certain height.

The ui:scrolelrWrapper component can be utilized rather than writing the css on your own. The component also contains a scrollTo method that allows you to scroll the content to a certain area.

To make div scrollable, you can follow the steps below:

You can use the x and y axis for a vertical scrollable bar. Create the overflow-x:hidden and overflow-y:auto. This will conceal the horizontal scroll bar and display only the vertical scrollbar. The scroll div will be vertically scrollable. < div xss=removed> It is a proper medium to learn programming.

The Salesforce Certification Training offered at JanBask Training provides experience like offline classes to help candidates master the Salesforce Development and Administration in a better way to face the tough job market scenario. The course guarantees job success and lets you qualify the certification exam through intensive, and expert-led virtual sessions and hands-on practical assignments. The course will teach you to create and configure the salesforce account to help you gather, extract, and examine the data relevant to the customer base. You can also avail the platform to create and use the advanced cloud apps with utmost confidence.

Your Answer


Parent Categories