AX1671

Formatted Grid style reference

When using the Axiom2018 skin, Formatted Grid components can use the following row and column styles. These styles provide the ability to set specific formatting properties for each row and column, including fonts, colors, and borders.

NOTE: If the form uses a legacy skin (any skin other than the default Axiom2018), the row and column styles are different. Additionally, the available styles depend on the theme assigned to the form. To see the available styles for legacy skins, use the Data Source Assistant and hover your cursor over a style name for a description of the style. See Using theme-based row and column styles (legacy skins).

Styles are listed by category. Some styles are only for use with rows or columns, while others can be used with either.

When applying styles, remember the following:

When you include a base style, it must be listed before any add-on styles. When using the Data Source Assistant or Tag Editor to apply styles, select the base style first so that the comma-separated list of styles starts with the base style. Base styles are listed in the Rows category for rows, and the Columns category for columns. For example: row, bold, row-height-30. If you omit the base style, the default row or col base style is assumed.
Row styles apply to the entire row, whereas column styles apply until a different column style is used. If a conflict exists between a row style and a column style, the column style takes precedence for the intersecting cell.

Background Colors

You can apply a background color style to rows and columns. Background styles are add-on styles.

Background styles start with bg- followed by a color code that indicates a structural, primary, or accent color in the Axiom Software color scheme. For example, bg-s9 applies structure color 9, which is a dark gray color.

When using the Data Source Assistant or Tag Editor, the background colors are presented in a drop-down list. A color block is displayed next to each code to show the color that will be applied.

Borders

You can apply border styles to rows and columns. You can also specify a color that applies to all defined borders for the row or column. Border styles are add-on styles.

Borders	Style Syntax
Border Top	brd-t: Applies a top border of 1px. brd-t-2: Applies a top border of 2px.
Border Bottom	brd-b: Applies a top border of 1px. brd-b-2: Applies a bottom border of 2px.
Border Left	brd-l: Applies a left border of 1px. brd-l-2: Applies a left border of 2px.
Border Right	brd-r: Applies a right border of 1px. brd-r-2: Applies a right border of 2px.
Border Presets	brd-tb: Applies a top and bottom border of 1px. brd-tb-2: Applies a top and bottom border of 2px.
Border Color	brd-color-s1 through brd-color-s6: Overrides the default border color to apply the specified color code. Other Axiom Software color codes are not supported in this context. brd-color-white: Overrides the default border color to apply a white border.

Columns

A base column style can be specified for each column. The base style defines the formatting for the column, which can then be further adjusted by adding any number of add-on styles.

The following base column styles are available. See also the Misc category for base styles that fit certain special situations.

Base Style	Description
col	Applies default column formatting. If no base style is specified for a column, the col style is used by default.
colhead	Applies formatting intended for column headers, including a background color. This style is typically used for the first few header cells in the column, and then a second `[ColumnStyle]` row is used to switch the column style back to col.

Font Colors

You can apply font color styles to rows and columns. Font color styles are add-on styles.

Font color styles are simply the Axiom Software color code, such as s7.

Indentation

You can apply indentation styles to columns. Indentation styles are add-on styles.

Indentation styles start with indent- followed by the indentation level of 0 through 3. For example, indent-2 indicates that the text should be indented two levels in.

Indentation styles only affect column contents that are left-aligned, either by default or by applying a text alignment style.

Margins

You can apply margin styles to rows. Margin styles are add-on styles.

Borders	Style Syntax
Margin Top	mgn-t-Size: Applies a top margin of the specified size. Supported sizes are 1, 2, 4, 8, or 16 pixels. For example, mgn-t-4 applies a 4px top margin.
Margin Bottom	mgn-b-Size: Applies a bottom margin of the specified size. Supported sizes are 1, 2, 4, 8, or 16 pixels. For example, mgn-b-4 applies a 4px bottom margin.

Misc

You can apply miscellaneous styles to columns, to handle specific formatting situations.

Style	Description
auto-width	Sets components in the column to automatic width. For example, if a Button tag is used within the column, the button will be sized based on the button text rather than filling the full width of the column. This style is a base style and can be used on its own.
fit-height	Sets components in the column to fill the height of the row. This is useful for image buttons, to preserve the aspect ratio of the image. This style is a base style and can be used on its own.
click-to-edit	Applies special formatting to unlocked cells. The cells display like locked cells until a user clicks on the cell to edit it. At that point, the cell becomes formatted like a text box. Without this style, unlocked cells display like text boxes. This style is an add-on style.

Style

Description

auto-width

Sets components in the column to automatic width. For example, if a Button tag is used within the column, the button will be sized based on the button text rather than filling the full width of the column.

This style is a base style and can be used on its own.

fit-height

Sets components in the column to fill the height of the row. This is useful for image buttons, to preserve the aspect ratio of the image.

This style is a base style and can be used on its own.

click-to-edit

Applies special formatting to unlocked cells. The cells display like locked cells until a user clicks on the cell to edit it. At that point, the cell becomes formatted like a text box. Without this style, unlocked cells display like text boxes.

This style is an add-on style.

Padding

You can apply padding styles to rows and columns. For rows, you can apply padding to the top or bottom of the row. For columns, you can apply padding to the left or right of the column. Padding styles are add-on styles.

It is important to understand the difference between margin and padding. Margin is the space outside of an element, whereas padding is the space within an element. For example, imagine that you have a row with a top border. If you apply a top margin of 4px, that margin comes before the top border. The space between the border and the content is unchanged. But if you apply top padding of 4px, the padding comes between the top border and the row content.

Padding	Applies To	Style Syntax
Padding Top	Rows	pad-t-Size: Applies top padding of the specified size. Supported sizes are 1, 2, 4, or 8 pixels. For example, pad-t-4 applies 4px top padding.
Padding Bottom	Rows	pad-b-Size: Applies bottom padding of the specified size. Supported sizes are 1, 2, 4, or 8 pixels. For example, pad-b-4 applies 4px bottom padding.
Padding Left	Columns	pad-l-10: Applies left padding of 10 pixels.
Padding Right	Columns	pad-r-10: Applies right padding of 10 pixels.
Other padding needs	Columns	pad-noinput: Applies cell padding that matches the automatic padding applied to input cells. This style is intended to be applied to non-editable cells when you want their padding to match the padding that is automatically applied to editable cells (unlocked cells or cells using TextArea tags).

Rows

A base row style must be specified for each row. The base style defines the formatting for the row, which can then be further adjusted by adding any number of add-on styles. Additionally, you can also specify a row height other than the default row height used by the base style. The following styles are available in this section:

Rows Description

Rows	Description
Row (Base styles)	Select one of the following base styles to apply to the row: row: Applies default row formatting. If no base style is specified for a row, the row style is used by default. input-row: Applies formatting intended for input rows.
Row Height	Row height styles set a specific row height in pixels, using the syntax row-height-Size. Supported sizes are 18, 30, 33, 55, 70, 100, 200 (all in pixels). Row height styles are add-on styles. NOTE: If you need to set the row to a custom height, you can use the `[RowHeight]` column in the data source instead. If the height is set in the `[RowHeight]` column, it overrides the value set by the style. See Setting row sizes for Formatted Grids.

Row
(Base styles)

Select one of the following base styles to apply to the row:

row: Applies default row formatting. If no base style is specified for a row, the row style is used by default.
input-row: Applies formatting intended for input rows.

Row Height

Row height styles set a specific row height in pixels, using the syntax row-height-Size. Supported sizes are 18, 30, 33, 55, 70, 100, 200 (all in pixels).

Row height styles are add-on styles.

NOTE: If you need to set the row to a custom height, you can use the [RowHeight] column in the data source instead. If the height is set in the [RowHeight] column, it overrides the value set by the style. See Setting row sizes for Formatted Grids.

Text

You can apply various text styles to rows and columns. Most text styles are add-on styles.

Text Format	Style Syntax
Text Alignment	The following add-on styles can be used to control text alignment: left center right If text alignment is not specified, the default alignment is applied.
Font Size	Font size can be set using the add-on styles f1 through f7, where f1 is the largest font and f7 is the smallest. See the Effective Style details for the exact font size.
Weight	The following add-on styles can be used to control font weight: light bold
Transform	The following add-on styles can be used to transform the text case (upper-case or lower-case): lower upper
Other	The following additional add-on styles can be applied to format text: underline italic wrap-text (column style only): Note that the row height must be set high enough to show the wrapped text. The grid cannot dynamically determine the necessary row height based on the contents. The following additional base styles can be used for specific formatting situations: underlined (column style only): This style causes hyperlink text to be formatted with blue font and an underline. Non-hyperlink text is unaffected.