Scroll Container
Introduction
A scroll container is used to divide the layout in regions (for details on regions, see the Scroll Container Region section) such as the header, sidebar, or footer. A scroll container must be the only top-level widget. Apart from that, a scroll container can only be placed directly in another scroll container.
Scroll containers may be placed on navigation layouts as well as on pages.
The scroll container example below divides the layout in three parts: a header containing an image, a part in the middle with a long piece of text, and a footer. You can scroll the long text inside the container, without scrolling the page.
A scroll container can consist of several scroll container regions. For more information on scroll container regions and their properties, see the Scroll Container Region section.
Properties Pane
The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Scroll container properties consist of the following sections:
Properties:
Styling:
Miscellaneous:
Properties
General Section
Layout Mode
This property determines in which mode the scroll container operates.
| Value | Description |
|---|---|
| Headline (default) | The top and bottom regions extend the entire width of the container and the remaining regions are placed in the middle. |
| Sidebar | The side panels extend the full height of the container. |
Scroll Behavior
This property determines what happens when the content of a region does not fit in the region.
| Value | Description |
|---|---|
| Per region (default) | Every region will show its own scroll bar in case its content does not fit. |
| Full widget | The scroll container will grow to fit its contents and will leave scrolling to its parent. |
Width
By default the scroll container will extend the full width of its parent widget. It can also be given a specific width, which can be defined either in pixels or percentage of its parent widget.
Default: Full width
Width Value
This property is displayed only when the Width property is set to Pixels or Percentage. This property determines the width of the scroll container, either in pixels or a percentage.
Alignment
This property is displayed only when the Width property is set to Pixels or Percentage. The scroll container can be aligned to the left, to the right, or in the middle of its parent widget.
Default: Center
Common Section
Regions Section
Regions define the content area of a scroll container. For more information see the Scroll Container Region section.
Enable Top
Determines whether the scroll container should contain a top region.
Enable Bottom
Determines whether the scroll container should contain a bottom region.
Enable Left
Determines whether the scroll container should contain a left region.
Enable Right
Determines whether the scroll container should contain a right region.
Styling
Design Properties Section
Common Section
Miscellaneous
Scroll Container Region Section
A scroll container region is part of a scroll container, and defines a content area. A scroll container can contain the following regions:
- Center
- Left
- Right
- Top
- Bottom
You can add and remove all the regions listed above except the center one.