Scroll Container

3 minutes to read Download PDF Edit

A scroll container is used to divide the layout in regions (for details on regions, see Scroll Container Region in the Mendix Reference Guide) 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.

Common Properties

Name

The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.

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

Layout Mode

This property determines in which mode the scroll container operates.

Value Description
Headline 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.

Default value: Headline

Scroll Behavior

This property determines what happens when the content of a region does not fit in the region.

Value Description
Per region 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.

Default value: Per region

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 a percentage of its parent widget.

Default value: Full width

Width Value (for Width Set to ‘pixels’ or ‘percentage’)

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

Alignment (for Width 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 value: Center

Regions

Enable Top

Determines whether the scroll container should contain a top region (for details on regions, see Scroll Container Region in the Mendix Reference Guide).

Enable Bottom

Determines whether the scroll container should contain a bottom region (for details on regions, see Scroll Container Region in the Mendix Reference Guide).

Enable Left

Determines whether the scroll container should contain a left region (for details on regions, see Scroll Container Region in the Mendix Reference Guide).

Enable Right

Determines whether the scroll container should contain a right region (for details on regions, see Scroll Container Region in the Mendix Reference Guide).

Copyright © Mendix. All rights reserved. | Mendix.com | Terms of Use | Privacy Policy