Row

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

Video Tutorial
​
Overview
​Set the size of the row​
​Space the elements horizontally​
​Space the elements vertically​
​Add a background color or picture​
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

Screen

Column

Last updated 8 months ago

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

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`