Form wizard - Layout
Applications module
Application structure / Select a page
New menu / Form wizard
The form wizard writes style classes to the surrounding grouping,
these affect the arrangement of the elements and the corresponding titles in the
grouping. To the right of each of the four options in the dialog, you will see a
preview of the option.
Option 1
In all display sizes ("SMALL", "MEDIUM", "LARGE"), the titles will be hidden
and - provided they are available - placeholders will be shown. The
"Display title in control" setting, which can be accessed in the
properties dialog of edit elements,
is automatically activated by the form wizard.
Option 2
In all display sizes, the titles and the edit elements will be displayed one
below the other in their own row. Here's what it looks like in the web:
Option 3
On small displays, the titles will be hidden and placeholders will be shown
instead, like in Option 1. On medium and large display sizes, the titles and
edit elements will each be shown in their own row, like in Option 2. Here's
what it looks like in the web on a small display size:
Option 4
On small displays, the titles are hidden and placeholders will be shown
instead. On medium displays, the titles and edit elements are shown in their
own row. On large displays, the titles and the corresponding edit elements
will be displayed next to one another. Here's what it looks like in the web
on a large display size:
View pages
On view pages, placeholders will not be shown in the view elements. Instead,
the title will, where appropriate, actually be hidden.
Style classes
Additional combinations can also be created by manually entering style classes.
The following style classes are defined for edit and/or view elements within a
grouping generated by the form wizard. The style class "Container_ResponsiveForm",
the starting class for the groupings, must be included so that
"ix-ViewPort-label-Position" classes take effect.
- ix-small-label-inline
- ix-small-label-hidden
- ix-small-label-top
- ix-small-label-left
- ix-medium-label-inline
- ix-medium-label-hidden
- ix-medium-label-top
- ix-medium-label-left
- ix-large-label-inline
- ix-large-label-hidden
- ix-large-label-top
- ix-large-label-left
Here, the styles are inherited from the smaller to the larger display size,
meaning from SMALL to MEDIUM and from MEDIUM to LARGE. For example, to depict
Option 1, the form wizard writes the class "ix-small-label-inline" to the
"Container_Responsive" grouping. For Option 3, "ix-medium-label-top" is
additionally written to overwrite the settings for the medium and large
display sizes. It is also conceivable, to, for example, create a grouping using
the class "Container_ResponsiveGroup ix-small-label-left", where titles and
edit elements are always shown next to each other on small displays.
The last selected layout option for the respective type
(e.g.
DIV layout for
an edit page) is saved in the file "manager.properties".