Links

Row

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

Video Tutorial

Set the Size of a 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
Last modified 11mo ago