X4 Produktdokumentation

<Cell>

The <Cell> element is used to create a content area in the <ResponsiveLayout> element.

The following attributes can be defined for the <Cell> element:

Attribute

Description

cellSizeDesktop

Defines the number of columns that the <Cell> element takes when displayed on desktop computers.

Possible values: Integers between 1-12

The value defined here overrides thedefaultCellSizeDesktopattribute in the <ResponsiveLayout> parent element.

cellSizeTablet

Defines the number of columns that the <Cell> element takes when displayed on tablets.

Possible values: Integers between 1-12

The value defined here overrides thedefaultCellSizeTabletattribute in the <ResponsiveLayout> parent element.

cellSizeMobile

Defines the number of columns that the <Cell> element takes when displayed on smartphones.

Possible values: Integers between 1-12

The value defined here overrides thedefaultCellSizeMobileattribute in the <ResponsiveLayout> parent element.

background

Defines the background color.
This setting overwrites the default color of the color scheme!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

  • Do not use a hash (#) in front of the color value!

  • Do not use a shortened notation of the color value.

  • Color code from the color palette of the Web App (see  Theming), e.g. A200

fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App.

  • If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the fontFamily attribute explicitly set.

Possible values:

  • MainFont: Stored main font

  • Font code from the font palette, e.g. Font04

fontSize

Defines the font size.

This attribute overrides the default font size of the Web App.

Possible values:

  • Any integer or decimal number with a dot as decimal separator, e.g. 20 20.8 .9

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em  oder  120%

  • Key words:  xx-Small x-small small medium large x-large xx-large smaller larger

fontStretch

Sets the width of the single characters.

This attribute overrides the default width of the characters of the Web App.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

fontStyle

Defines the font style.

This attribute overrides the default width of the characters.

Possible values:

  • italic: italic characters

  • normal: normal characters (default)

  • oblique: italic characters (calculated)

fontWeight

Defines the font weight.

This attribute overrides the default weight of the characters.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

foreground

Defines the font color.

This setting overwrites the default color of the color scheme!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

  • Do not use a hash (#) in front of the color value!

  • Do not use a shortened notation of the color value.

  • Color code from the color palette of the Web App (see  Theming), e.g. A200

minHeight

Minimum height of the layout

Possible values: Integer

horizontalAlign

Direction in which the elements flow. The order of the elements corresponds to their declaration.

Possible values:

  • left (default)

  • center

  • right

textOverflow

Defines what happens if the page is full.

Possible values:

  • ellipsis  (default): Show with ... that the text is not finished

  • hidden: Break off text, paying attention to whole words

  • wordBreak: Break off within the word

  • allow: Break off text between words

visible

Defines if the layout is visible.

  • Data binding (boolean) possible.

Mögliche Werte: Boolean or data binding expression

For further information please visit the section