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 Actions > Launch 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:
  • same for all sides — clear this check box if you want to specify a different border style for Top , Left , Right , and Bottom .
  • Select a border type and specify the pixel width and color of the border: none, solid, dashed, or dotted.

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:

none
Indicates no background color, similar to setting a transparent background.
solid
Enter a hexadecimal value (such as #3d3d3d), or click the box next to the Color field to choose a color.
gradient
Select the Direction in which you want to blend the background colors (horizontal or vertical. Specify the Start and Stop colors of the gradient. Specify a Backup color, in the event that the browser cannot render the gradient.
image
Select a background image by specifying the following options:
Background color
To use the background color specified in a mixin, choose obtained from mixin and then click the gear icon to select the mixin. Alternatively, you can select custom color and enter the CSS hexadecimal value or click the box next to the field to choose a color.
Location
Enter the location of the file, including the relative path. For example, images/AlphaCorpLogo.png.
Tile
Specify tile settings for the image.
  • If you want to use a single image, select None.
  • If you want a row of images in the background, select Horizontal.
  • If you want a column of images in the background, select Vertical.
  • If you want rows and columns containing the image in the background, select Both.
Position
Specify the placement of the starting tiled image, for example: top left.
Additional styles
You can apply additional styles, specific to styling the text for this element, by specifying a CSS attribute and value. You must specify a CSS attribute that is related to background styles. Click Add additional styles to define another CSS attribute-value pair.

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.