Snap to Place
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
.png?alt=media&token=8bad0383-e81c-4574-b959-105686c62281)
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 valueBackground 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 ratiowill not change
- Center: Positions the image in the middle of the frame
Last modified 6mo ago