Snap to Place
Powered By GitBook
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
Last modified 3mo ago