Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.

Scroll Container

Last modified: August 2, 2022

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 one or more cascading style sheet (CSS) classes for the widget. The classes should be separated by a space. The classes will be applied to the widget in the browser and the widget will get the corresponding styling. The classes should be classes in the theme that is used in the project. It overrules the default styling of the widget.

Styling is applied in the following order:

  1. the default styling defined by the theme the project uses
  2. the Class property of the widget
  3. the Style property of the widget.

You can see which widgets in a page have styling applied via the class or style property by clicking the Show styles button.

Location and effect of the Show styles button

Style

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

For example:

background-color:lightblue; color:red;

will result in red text on a blue background.

You can see which widgets in a page have styling applied via the style or class property by clicking the Show styles button.

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