If you would like to upgrade to a newer long-term support version of Studio Pro, see Moving from Mendix Studio Pro 8 to 9.

Container

Last modified: August 20, 2024

Introduction

A container is a layout element that can be used to simultaneously style, hide, drag, or delete a group of widgets placed in it:

In a browser, it is rendered as a simple div element by default. It is also possible to render a container as one of HTML5 semantic elements (for example, section, main, article, nav).

Properties

An example of container properties is represented in the image below:

Container properties consist of the following sections:

Accessibility
Common
Design Properties
General
Events
Visibility

Accessibility

Hide for Screen Readers

This property specifies whether to hide the container from screen readers or not.

The container should not have any focusable elements inside such as input widgets, links, or buttons. These elements will cause the container to be announced by screen readers.

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

General Section

Render Mode

The Render mode determines which HTML5 tag will be used to show the container in the web browser.

Value	HTML Tag
Div (default)	`div`
Section	`section`
Article	`article`
Header	`header`
Footer	`footer`
Main	`main`
Nav	`nav`
Aside	`aside`
Hgroup	`hgroup`
Address	`address`

Render mode is not supported on native mobile pages.

Events Section

On-Click

The On-click property specifies the action that will be executed when the user clicks the container (either with their mouse pointer or by pressing the Enter or Space keys when the container is in focus).

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.