-
What is use of ui:scrollerWrapper in Salesforce?
What is use of ui:scrollerWrapper in Salesforce?
-
4 Replies
-
Hi Shradha,
A ui:scrollerWrapper creates a container that enables native scrolling in the Salesforce app. This component enables you to nest more than one scroller inside the container. Use the class attribute to define the height and width of the container. To enable scrolling, specify a height that’s smaller than its content.
This example creates a scrollable area with a height of 300px.<aura:component>
<ui:scrollerWrapper class=”scrollerSize”>
</ui:scrollerWrapper>
</aura:component>/** CSS **/
.THIS.scrollerSize {
height: 300px;
} - [adinserter block='9']
-
Adding some points:
If you’re developing for Lightning Experience, this badge indicates a component that can be supported on mobile through the use of the ui:scrollerWrapper component. More information about ui:scrollerWrapper can be found in the Lightning Developer Guide. The Lightning Design System scrollable class does not bypass the “Pull to Refresh” scrolling behavior on mobile devices, so using ui:scrollerWrapper allows you to set up scrollable content areas on mobile devices that don’t interfere with other behavior.
Thanks
-
Here’s an example of how you might use ui:scrollerWrapper to make a tab’s content scrollable using the lightning namespace:
<aura:component>
<lightning:tabset>
<lightning:tab label=”Item One”>
<ui:scrollerWrapper> <div> Tab Content Goes Here </div>
</ui:scrollerWrapper>
</lightning:tab>
<lightning:tab label=”Item Two”> Sample Content Two </lightning:tab>
</lightning:tabset>
</aura:component>
Thanks
-
<aura:component>
<ui:scrollerWrapper class=”scrollerSize”>
<!–Scrollable content here –>
</ui:scrollerWrapper>
</aura:component>/** CSS **/
.THIS.scrollerSize {
height: 300px;
}
Log In to reply.
