Layout in applications

In Applications, the layout of Application elements can be edited at various points.

"Style" tab

The "View" tab can be found in the elements properties dialog. Style classes that have been defined in the "Design" module can be assigned here.

Style class

Displays the name of the selected style class.

Edit style class

Layout

In this list, you can select from all the layouts that have been published in the "Design" module of the current portal.

Style classes

Select the desired style class on the left-hand side of the dialog.

Preview

You will see a preview of the selected style class on the right.

Close the dialog by clicking "OK", which also saves all the changes made here.

Edit style class - Arrow symbol

If you activate "Display predefined style classes", you can select predefined style classes by clicking on the corresponding checkboxes. If "Display predefined style classes" is deactivated, the Preview area is displayed instead.

Preview

Displays a preview of the selected style class.

Individual settings

You will see all CSS adjustments listed in the "Individual adjustments" area.

Add CSS rule / Edit CSS rule

Opens a dialog where new CSS rules can be created or existing CSS rules can be edited.

Styles

Detailed information about the settings in the "Styles" area can be found here.

Options

The selector can be edited by clicking the "Options" button.

Click "OK" to save changes to the CSS rules and close the dialog.

Remove CSS rule

Removes the CSS rule from the list.

Move CSS rule up / down

Adjust the order of the CSS rules.

Design presets for elements

The outside margin of elements on pages where the "Use table layout" setting is disabled can be defined in the design presets for elements.

You can access the "Design presets for elements" dialog via the main menu "Edit / Edit layout".

Control

This column lists all application elements for which the margins and style classes can be defined within a div container.

Top / Right / Bottom / Left

Clicking in one of the checkboxes in the column header selects all the checkboxes in the corresponding column. It is also possible to select or deselect individual checkboxes in the columns. If a checkbox in a column is selected, a margin is set up on the corresponding side of the element. The following style classes are initially assigned to the respective element:

• Top

  ix-margin-top

• Right

  ix-margin-right

• Bottom

  ix-margin-bottom

• Left

  ix-margin-left

The specification of the margin size is entered in the style classes and can be edited in the "Design" module. Simply search for the name of the style class there. When creating an element in a div container, when moving or copying to a div container or when grouping, the style classes named above will be used. If you move an element with these style classes to a container, which is not a div container, or if you remove a grouping, the style classes are maintained.

Style classes

Each element can be assigned additional style classes here, these will be added automatically to the control when creating an element in a div container.

Reset to default

Clicking this button restores all settings to their default values.

Tooltip positioning - Appearance

The "Appearance" tab can be found in the properties dialog of buttons at Tooltip positioning. Style classes that have been defined in the "Design" module can be assigned here. Click here for more information about this dialog.