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.
A preview of the currently selected format displays to the right. You can also preview formats by selecting on the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.
| Use same formatting for top and bottom layouts | Applies the settings to top and bottom layouts. Clear this check box if you want define different styles for top and bottom layouts. Additional fields appear. |
Specify the Background , Border , and Padding for the Top and Bottom action layouts.
The font is determined by the Overall Font specified on the Mixins tab.
Border
Applies to the border of the action layout.
| Use default border for this grid format | Select to use the default border specified in the Default text area on the General tab. |
| Use mixin | Select to use a mixin to define the appearance of the border. Mixins displays
the name and a preview of the currently selected mixin. Click the menu icon to
select a different mixin from the list. For the Top , Left , Right , and Bottom border, select to use the border specified in the mixin ( from mixin ) or select another option: none, solid, dashed, or dotted. |
| Specify styles | Select to define a custom border:
|
Padding
Defines the padding for the margin around the outside of the action layout.
| Padding | Specify the width of the padding in pixels. Clear the Apply same padding on all sides check box if you want to specify a different amount of padding, in pixels, for Top, Left, Right, and Bottom. |
Background
Applies to the background of the action layout.
| Use default background for this grid format | Select to use the default background specified in the Default text area on the General tab. |
| Use mixin | Select to use a mixin to define the appearance of the background. Mixin displays the name and a preview of the currently selected mixin. Click the menu icon to select a different mixin from the list. |
| Specify styles | Select this check box to define a custom background: Select the background Type:
|
Responsive Breakpoints
Enable support for responsive breakpoints – Select this check box to add a responsive breakpoint to your grid. When the screen size reduces to the dimensions that you specify, the grid's appearance changes, according to the options you select for the first, second, and third breakpoints.
Breakpoint 1 – Select the format that the grid should use when rendering at the dimensions specified for this breakpoint.
- Drop columns with importance ‘other’ — All columns in a harness or section grid that have the default Importance property of Other are removed from the grid when the screen size is less than the selected breakpoint.
- Transform to list — The contents of all columns in a harness or section grid that have the Importance property of Secondary are consolidated in a single-column "fat list" with their respective Primary column text appearing as a bolded heading. See Breakpoint2 (below) for the list options.
- Hide grid — The entire grid is hidden when the screen size is less than the selected breakpoint.
- max-width — Specify the maximum width at which the grid will display in the format you specified for this breakpoint.
- unit — Specify the unit of measurement for the width of the grid: px (pixels) or em (font size).
- min-width — Specify the minimum width at the grid will display in the format you specified for this breakpoint. Leave min-width empty when a range is not desired.
- unit — Specify the unit of measurement for the width of the grid: px (pixels) or em (font size).
Add breakpoint — Select to add another responsive breakpoint.
Click the X icon to remove an additional breakpoint.
Breakpoint 2 — Typically, the second breakpoint determines the appearance of the primary and secondary cells when the grid becomes a "fat list." (You have the same options for dropping columns, transforming to a list, or hiding the grid as for Breakpoint 1.)
- List Item — Changes the grid to a one-column list with the following options. Refer to Border settings above.
- List Item Bottom Spacing — The spacing in px (pixels), percent, or em (font size) from the base of the grid to the edge of the harness/section or next control.
- Primary Cell — Applies to the cells of the column marked Primary as it appears in the
list. Refer to Border and Background settings above.
- Background — Refer to Background settings above.
- Border — Refer to Border settings above.
- Secondary Cell — Applies to the cells of the columns marked Secondary as they appear in the list.
- Label position — Select None (no label) or Left.
- Label width — Specify the label width and unit of measurement for the label width: px (pixels) or em (font size).
- Label format — Choose from the available skin styles.
- max-width/unit — Refer to Breakpoint 1 properties above.
- min-width/unit — Refer to Breakpoint 1 properties above.
Breakpoint <n> — The third (and any other) breakpoints determine the final appearance of the grid or whether to hide it. You have the same options for dropping columns, transforming to a list, or hiding the grid as for Breakpoint 1 and Breakpoint 2.
- Component styles (custom style formats)
Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.
- Skin rules
Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and the placement and alignment of elements.
Previous topic Skin form — Components tab — Layouts — Trees and tables - Behaviors tab Next topic Skin form — Components tab — Layouts — Legacy layouts