Component styles for layouts
Learn about the presentation of layouts in custom style formats.
- Configuring a responsive user interface
Improve the clarity and usability of your application on mobile devices by defining how the user interface behaves on smaller screens.
- custom button formats
Styles set here apply to the active and inactive headers of accordion controls. You can set styles for the Standard and Sub accordion formats, as well as create custom accordion formats.
- Skin form — Components tab — Layouts — Accordions — Body tab
As a best practice, use a dynamic Layout Group instead of this control. See Layout Groups.
- Skin form — Components tab — Layouts — Containers
These styles apply to the container header. You can specify styles for the Default container format and create custom container formats.
- Skin form — Components tab — Layouts — Containers
Styles set here apply to the body of the container, the area below the container header. You can specify border, background, and padding for the body of the container.
- Skin form — Components tab — Layouts — Containers
Styles set here apply to the container as a whole. Set the border, background, and indentation of the container here.
- Skin form: column layouts
Styles set here apply to column layout formats. Column layouts provide the ability to display main content alongside supporting content. You may choose to display main content, such as a case, in the main area and supporting content in a sidebar.
- Skin form — Components tab — Layouts — Dynamic layouts
- Skin form — Components tab — Layouts — Layout Groups
A layout group combines different types of layouts to display a set of content such as a list of financial accounts and related transactions. You use a layout group to specify how to navigate sets of information. For example, this could be a tab for each account, or by simply changing the type, the account list can be rendered as either a drop-dow
- Skin form — Components tab — Repeat-row/columns
The styles you define here apply to the text and background color of rows in a Row Repeat or Column Repeat layout.
- Skin form — Components tab — Repeat-row/columns
Apply custom formats to column headers in Row Repeat and Column layouts to customize user interface.
- tabs
Styles set here apply to tabs. When you create a tab group in a layout, you can select a format in the Style format field in the Tab Group properties panel. Tabs in a harness container always use the Standard format.
- Skin form — Components tab — Layouts — Tabs
Styles set here apply to the tab body, the area beneath the tab header and underneath the layout in tab groups. When you create a tab group in a layout, you can select a format in the Format field in the Tab Group properties panel. You can specify values for the padding, border, and background of the following tab formats:
- grids
Use this tab to define default settings for text, border, and background in the selected grid format. You can then select a check box to apply these default settings to various table (grid) elements on the Rows, Headers, Borders, Behaviors, and Headers and footers tabs, rather than defining the text, border, and background style on each of these t
- Rows
Styles that you set on this tab apply to the rows in tables, tree tables, and tree layouts.
- Headers
These styles apply to the column and row headers in a table, tree, or tree table layout. You can specify text, background, and border styling, as well as icons that indicate column sorting, filtering, and row handles.
- Skin form — Components tab — Layouts — Trees and tables — Borders tab
Styles that you define here apply to borders of grid, tree, and tree grid layouts.
- Skin form — Components tab — Layouts — Trees and tables - Behaviors tab
Styles set here determine the text and background of a grid row when the row has focus or is selected; the style of text in a row when the mouse pointer hovers over the row; and the border, background, and images associated with drag and drop behavior within the grid.
- Skin form — Components tab — Layouts — Trees and tables - Actions Layout tab
Styles set here apply to the top and bottom action areas of the selected repeating grid, tree, or tree grid layout format.
- Skin form — Components tab — Layouts — Legacy layouts
The styles you set here apply to Smart layouts. A Smart layout is a template containing fixed-width, fixed-height column pairs. Smart layouts ensure vertical alignment, even when layouts are nested.
Previous topic Skin form — Components tab — General — Wizards Next topic Configuring a responsive user interface