You are here: User interface > User interface rules > Harness forms > Screen layout properties

Screen layout properties

Some layout properties might not be available if the harness is used as an app view, main area, inner harness, or page view.

Unit

Specify the unit of measurement for the width of the layout:
percentage (%) or pixels (px).

Alignment

Specify the overall alignment of the screen layout on the screen.

Width

Specify the width of the screen layout in pixels.

Screen layout format

Select one of the following screen layout formats:

  • Content Only
  • Header
  • Footer, Header Left
  • Header Right
  • Header Left Right
  • Header Footer, Header Footer Left
  • Header Footer Right
  • Header Footer Left Right
  • Left
Layout mode

Optimized code - Recommended option. Select optimized code to use flexbox-based layout in your form. A flexbox layout alters the width, height, and order of its contents to best fill the available space. The child layouts contained within this type of layout can be laid out in vertically or horizontally. You can expand them to fill the available space or shrink to avoid overflowing the parent layout. You can also manipulate horizontal and vertical alignment of the child layouts. If you need to build layouts in two dimensions, use nesting layouts (horizontal inside vertical or vertical inside horizontal).

Legacy code - Select legacy code to use float-based layout in your form. This type of layout uses the inline block when setting several layouts side-by-side inline. The inline block is compatible with pre-flexbox generation of dynamic layouts. Converting this layout to the optimized layout mode might require additional changes if you use custom CSS for styling the dynamic layout.

Inline style

As a best practice, define custom styles in the skin.

Optional. Enter CSS code for an inline style for the screen layout.