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.
Layout grid
The layout grid is a widget that gives structure to your pages. A layout grid contains one or more rows and each row contains one to twelve columns. Each column has a weight, a number from 1 to 12, and the weights of the columns in a row must add up to 12. In the browser the layout grid is implemented by the Bootstrap grid system. Reading the official Bootstrap documentation on the grid system can help you understand what you can build with this widget.
Automatic classes
The layout grid is exported as nested div elements. In addition to the classes you specify in the various Class properties, a number of classes are added automatically.
|
|
The outermost div
represents the widget as a whole and gets the one of the following classes:
container-fluid
when width is set to full widthcontainer
when width is set to fixed width
The second div
represents a row and automatically gets the row
class. The innermost div
represents a column and automatically gets the weight class col-md-<weight>
.
Components
Rows
A layout grid contains one or more rows. Each row can be styled with the Class and Style properties. Rows can be made conditionally visible through the property called ‘Visible’.
Each row in turn contains columns and the number of columns can differ per row.
Columns
A row in a layout grid contains one or more columns. Each column can be styled with the Class and Style properties. Additionally, the Weight property determines how wide the column is. The weights of all columns in a row must add up to 12. Examples of valid rows are:
- one column with weight 12
- two columns, both with weight 6
- a column with weight 3 and a column with weight 9.
There is rarely a use case for more than four columns in a row.
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:
- the default styling defined by the theme the project uses
- the
Class
property of the widget - 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.
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
Width
This property determines the width of the layout grid.
Value | Description |
---|---|
Full width | The layout grid spans the full width of the available space and will stretch and shrink. |
Fixed width | The layout grid has a fixed width but it is still responsive to viewport changes. Note that the width is not configurable in the modeler but is determined by Bootstrap. |
Visibility Properties
Visible
By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met.