Form wizard - Layout
Using the Form wizard, style classes are written to the surrounding grouping, these effect 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'll see a preview of the option.
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
of edit elements, is automatically activated by the Form wizard.
Here's what it looks like in the web:
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:
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:
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:
On view pages, placeholders won't be shown in the view elements. Instead, the title will, where appropriate, actually be hidden.
Additional combincations 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 present so that ix-ViewPort-label-Position
classes are effective.
Here, the styles are inherited from the smaller to the larger display size, meaning from SMALL
and from MEDIUM
. 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's 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.