You are here: Reference > Rule types > Skins > Skin form - Layouts - Legacy layouts

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.

Setting Smart layouts values in the Skin rule ensures that column alignment is based upon a style sheet and therefore matches across all sections. See Harness and Section forms — Adding a layout.

You can modify the standard Smart layouts templates or create custom Smart layouts templates.

SmartLayout Styles

To preview formats, select Actions > Launch in the toolbar and then choose one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, click the Layouts tab. Select the format you want to preview: Default, Spreadsheet, or Transparent.

Modifying Standard Smart layouts Templates

Specify settings for the following standard Smart Layouts:

Values for Column Pairs

For each column pair, Single, Double, Triple, and Custom, enter values for the following in pixels:

Height Enter the height.
Label Enter the width of the label column.
Field Enter the width of the field column.
Spacer Enter the width of the spacer column.
Total Displays the sum of the width values.

Width of Text Boxes and Controls

Width

Specify the width of text and control properties within the boundaries of the field column. These include input, selection, and AutoComplete boxes.

For each column type, select the Width check box, enter a value in the next box to the right, and select px (pixels) or % in the drop-down box. By reducing the text box size, you create extra space within the column to which you can add a control property, such as a check box or a calendar, while maintaining uniform column widths.

As a best practice, do not enter a pixel value greater than the Field width or a percentage greater than 100. Doing so overrides the Field width settings.

If you do not want to use this feature, clear the Width check box. Its associated fields disappear. Doing so enables you to define custom dimensions using the cell property panels in the layout.

Minimum Screen Width

Width

Determine the smallest value to which a user can compress the screen size before a horizontal slide bar appears.

The minimum value provides consistent alignment by preventing columns and text from wrapping.

To use the minimum setting, select the Has Minimum Width? check box on the Display Options tab of a Harness form.

Creating custom templates

Creating a custom template

  1. Click Add a new layout.
  2. Type the custom template name using only alpha-numeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The name that you enter is converted into the name of the CSS class/classes.
  3. Specify the values for column pairs, text boxes and controls, and minimum screen width.
  4. Save the skin.

Applying a custom template

  1. Add any Smart layout: Single, Double, or Triple.
  2. Click the Gear icon Gear icon to open Layout Properties.
  3. On the General tab, specify the Container Format. To specify a custom container format defined in the skin, select Other in the Container Format drop-down. In the Container style field, press the down arrow to select the container format that you want to apply.
  4. Select the Allow changes to columns check box. The Smart layout type field changes to Style format.
  5. In the Style format drop-down, select the format you want to apply to the smart layout. To specify a custom format defined in the skin, select Other. In the field that appears, press the down arrow and select the format that you want to apply to the smart layout.

You can delete styles that you create; click Delete.


Related topics Harness, section and flow action forms — Adding a layout
Related topics Skin rules — Completing the Components tab

About Skin rules

Open topic with navigation