Skip to main content

 

 

 

 

 

 
Applies only to Mobile Apps and Reactive Web Apps

 

 
 
OutSystems

Scrollable Area

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The Scrollable Area Pattern is a simple scrollable block with a placeholder for content. You can use this pattern to display multiple elements in a single, scrollable row or column.

    Scrollable Area example

    How to use the Separator UI Pattern

    1. In Service Studio, in the Toolbox, search for Scrollable Area.

      The Scrollable Area is displayed.

      Scrollabel Area widget

    2. From the Toolbox, drag the Scrollable Area widget into the Main Content area of your application's screen,

      Drag widget to sreen

      By default, the Scrollable Area widget contains a Content placeholder.

    3. Add the relevant content to the Content placeholder.

      In this example, we add some images by dragging the Image widget into the Content placeholder, and on the Properties tab, from the Image dropdown, select the relevant images.

      Add images to Content placeholder

    4. On the Properties tab, you can customize the Scrollable Area's look and feel by setting any of the optional properties, for example, the height and width of the scrollable area.

      Set the optional properties

    After following these steps and publishing the module, you can test the pattern in your app.

    Properties

    Property Description
    Orientation (Orientation Identifier): Optional Set the orientation to either horizontal or vertical. Note that, when the Orientation is set to vertical, a fixed height value must be added.
    Height (Text): Optional Define the height of the scrollable area. If not defined, the height of the of the parent wrapper is used (100%).
    Width (Text): Optional Define the width of the scrollable area. If not defined, the width of the parent wrapper is used (100%).
    ScrollbarType (ScrollbarType Identifier): Optional Choose between different scrollbar types - Compact, Default, and None. If None is selected, the scrollbar is invisible, but you can still scroll. Horizontal scroll is not enabled with the mouse wheel but can be done with mousepad gestures.
    ExtendedClass (Text): Optional Add custom style classes to the Scrollable Area UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Scrollable Area UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the Scrollable Area UI styles being applied.
    • Was this article helpful?