📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • 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
  • 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)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Video Tutorial
  • Set the Size of a Row
  • Space the Elements Horizontally
  • Space the Elements Vertically
  • Add a Background Color or Picture

Was this helpful?

Export as PDF

Row

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

PreviousScreenNextColumn

Last updated 1 year ago

Was this helpful?

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