Skip to main content




Applies only to Mobile Apps and Reactive Web Apps

Scrollable Area

  • 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.

    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

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    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.

    Example result:

    Scrollable Area example


    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 Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.


    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?