Scroll Container Region

2 minutes to read Download PDF Edit

A scroll container region is part of a Scroll Container, and defines a content area.

Common Properties

Class

The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.

Note that the styling is applied in the following order: 1. Default styling defined by the theme the project uses. 2. The 'Class' property of the widget. 3. The 'Style' property of the widget.

Style

The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

background-color:blue; This will result in a blue background

General Properties

Width (Only for Left and Right Regions)

Whether the width value of the region is defined in pixels or as a percentage of its parent’s width.

Width Value (Only for Left and Right Regions)

The width of the region, either in pixels or a percentage, depending on the value of the width property.

Height (Only for Top and Bottom Regions)

Whether the height value of the region is defined in pixels or as a percentage of its parent’s height.

Height Value (Only for Top and Bottom Regions)

The height of the region, either in pixels or a percentage, depending on the value of the height property.

Toggle Mode (Only for Left and Right Regions)

This setting determines whether the region is always visible or can be hidden from view. The different options allow the sidebar to interact with the page in a variety of ways when moving in and out of view. The visibility of the region is triggered by the sidebar+toggle.

Option Description
None The sidebar is always visible.
Push content aside The sidebar moves the rest of the content off screen.
Slide over content The sidebar moves over the content.
Shrink content (initially open) The content shrinks to make space for the sidebar and will be visible when the page loads.
Shrink content (initally closed) The content shrinks to make space for the sidebar and will not be visible when the page loads.