Thunkable Docs
Click here to build your own apps!
Drag and Drop docs
Snap to Place docs
Search…
Snap to Place
👋
Welcome to Thunkable
👶
Getting Started
🆕
Create New Project
Thunkable Sample Projects
Public Gallery of Projects
🛠️ Components
🔘
User Interface
Button
Label
Text Input
List Viewer
Web Viewer
Switch
Slider
Alert
Loading Icon
Date Input
Time Input
PDF Reader
Rating
📊
Data Viewers
Data Viewer List
Data Viewer Grid
Custom Data Viewer Layout
Data Sources
📐
Layout
Top Tab Navigator
Bottom Tab Navigator
Stack Navigator
Drawer Navigator
Screen
Row
Column
📷
Image
Image
Photo Library
Camera
Barcode Scanner
Image Recognizer
Animation by Lottie
Video
Video Recorder
🗄️ Data
Local Storage
Local DB
Realtime DB by Firebase
Airtable
Media DB by Cloudinary
File Picker
Web API
🌍
Location
Maps by Google and Apple
Location Sensor
💲
Monetization
Ads by AdMob
In-App Purchase
🌐
Sensors
Gyroscope
Magnetometer
Accelerometer
Timer
Bluetooth Low Energy
🔊
Voice
Sound
Text to Speech
Speech Recognizer
Translator
Assistant by Dialogflow
Audio Recorder
🤝
Social
Share
Email Sign In by Firebase
Push Notifications by One Signal
🎮Gaming
Canvas
Sprites
Sprite Gallery
Canvas Label
🤖Gaming Blocks🎮
Events
Motion
Looks
Direction
Sensing
Add & Remove
Stage
Canvas Label
🤖
Blocks
Control
Logic
Math
Text
Lists
Color
Objects
Device
Variables
Functions
"Any Component" Blocks
🖥️ App Services & Emulators
🔒
App Data Privacy
➕
Make Copy
📥
Download
📤
Share
📱
Publish
Publish to App Store (iOS)
Publish to Play Store (Android) with AAB
Publish as a Web App (PRO)
Generate Screenshots
🔎
Troubleshooting
📏
Intro to Spacing
🖼️ Intro to Sizing
🔤
Fonts
💾
Managing Storage
📰
Release Notes
🗄️ Release Notes Archive
📝
Bugs and Feature Requests
Powered By
GitBook
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
Previous
Screen
Next
Column
Last modified
11mo ago
Export as PDF
Copy link
Contents
Video Tutorial
Set the Size of a Row
Space the Elements Horizontally
Space the Elements Vertically
Add a Background Color or Picture