Comment on page

Column

A column is a vertical container that allows you to stack components.

Video Tutorial
Set the Size of a Column
For more information on sizing in your app, please see our introduction here​​
Property
Description
Height
Fill container - The column fills the entire screen vertically  
Fit contents - The column’s height changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
Absolute size -  Sizes the column to a specified number of pixels
Width
Fill container - The column fills the entire screen horizontally  
Fit contents -  The column’s width changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
Absolute - Sizes the column to a specified number of pixels
Space the elements vertically
The Vertical Alignment property allows you to space elements in a Column vertically
Space the elements horizontally
The Horizontal Alignment property allows you to space elements in a Column horizontally
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
This determines how to resize the image when the frame doesn't match the raw image dimensions.
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
Enable scrolling
Property
Description
Scrollable
Default (false). Indicates whether the column is scrollable. For scrollable to work, you must also set your screen height to fit contents  and the components in your column must have heights set in absolute pixels

Row

Image

Last modified 3mo ago

Property	Description
Height	Fill container - The column fills the entire screen vertically Fit contents - The column’s height changes to fit the components it contains Relative size - The column fills the specified percentage of the screen Absolute size - Sizes the column to a specified number of pixels
Width	Fill container - The column fills the entire screen horizontally Fit contents - The column’s width changes to fit the components it contains Relative size - The column fills the specified percentage of the screen Absolute - Sizes the column 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`

Property	Description
Scrollable	Default (`false`). Indicates whether the column is scrollable. For scrollable to work, you must also set your screen height to `fit contents` and the components in your column must have heights set in `absolute` pixels