Help & Documentation
Open Support Ticket

Configure Styles for App Builder Elements And Components

App Builder includes a set of Elements and Components you can use to build Apps. To configure styles for any Element or Component, select it and navigate to the Styles tab. This article describes the available style settings.

NOTE: Some styles and their fields are available only for certain Elements and Components.

Size

FieldDescription
Width Set the width and height of the element:
  • Fit Content: Automatically sizes to wrap the element's content, without exceeding the container's bounds.
  • Fill: Stretches to occupy all available space in the parent container: always 100% on the cross axis, shared equally with other fill siblings on the main axis.
  • Relative: Sized as a percentage of the parent container.
  • Fixed: Sized in exact pixels, regardless of the parent container or content.
Height

Layout

The Layout section controls how a container arranges and spaces its child elements, including their direction, alignment, distribution, and spacing.

FieldDescription
Direction Controls the axis along which child elements are arranged.
  • Horizontal: Children are placed side by side in a row.
  • Vertical: Children are stacked on top of each other in a column.

Wrap (Horizontal Direction only)

Controls whether children flow onto the next line when they run out of space.

  • Yes: Children wrap onto the next line.
  • No: Children are forced into a single line.
Align

Controls how child elements are positioned along the cross axis.

  • Left: Children are aligned to the start of the container.
  • Center: Children are centered within the container.
  • Right: Children are aligned to the end of the container.
Distribute

Controls how child elements are spaced along the direction of flow.

  • Start: Children are packed toward the beginning of the container.
  • Center: Children are centered along the container.
  • End: Children are packed toward the end of the container.
  • Space Between: Children are evenly spread, with no space before the first or after the last.
  • Space Around: Children are evenly spread, with equal space around each child.
GapSet the space between child elements.
PaddingSets the space between the container's border and its content:
  • All Sides: Applies the same padding to all four sides.
  • Individual sides: Applies padding to each side separately (T: top, R: right, B: bottom, L: left).

Border

FieldDescription
Border WidthSets the thickness of the border in pixels.
Border RadiusSets the rounding of the container's corners in pixels: 
  • All Corners: Applies the same rounding for all four corners.  
  • Individual Corners: Applies rounding to each corner separately (TL: top-left, TR: top-right, BR: bottom-right, BL: bottom-left).
ColorSets the border color.

Background

FieldDescription
TypeSets the background type: 
  • Color applies a solid background color; 
  • URL loads an image from an external link; 
  • Upload Image uses a locally uploaded image.
Color (Color only) Sets the background color using the color selector.
URL (URL only)The external link to the background image.
Fit (URL and Upload Image)Controls how the image fills the background: 
  • Fit: Scales the image to fit within the container without cropping. 
  • Fill: Scales the image to cover the entire container, cropping if necessary.

Text

FieldDescription
FontSets the font used for the text.
Font SizeSets the size of the text in pixels.
ColorSets the text color using the color selector.