Row

A row is horizontal container that allows you to position components side by side.

Set the size of the row

For more information on sizing in your app, please see our introduction hereโ€‹

Property

Description

Height

  • Fill container - The row fills the entire screen vertically

  • Fit contents - The rowโ€™s height changes to fit the components it contains

  • Relative size - The row fills the specified percentage of the screen

  • Absolute size - Sizes the row to a specified number of pixels

Width

  • Fill container - The row fills the entire screen horizontally

  • Fit contents - The rowโ€™s width changes to fit the components it contains

  • Relative size - The row fills the specified percentage of the screen

  • Absolute - Sizes the row to a specified number of pixels

Space the elements horizontally

The Horizontal Alignment property allows you to space elements in a Row horizontally

Space the elements vertically

The Vertical Alignment property allows you to space elements in a Row vertically

Add a background color or picture

Property

Description

Background Color

Default (none). Select any color using the color picker, RGBA or HEX value

Background Picture

You can upload a background image to your app or reference an image url e.g.beaver-yellow.png

โ€‹

โ€‹

Background Picture Resize Mode

  • Cover: Fills the entire screen without changing the height and width ratio of the image

  • Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image

  • Stretch: The image's height will change to fill the screen length-wise

  • Repeat: Repeat the image to cover the screen. The image's height and width ratio

    will not change

  • Center: Positions the image in the middle of the frame