LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • The Goal
  • The Description
  • The Knowledge You Will Get
  • The Project Structure
  • 1. Desing a Stretched Layout
  • The Conclusion

Was this helpful?

  1. Working with Adapptio
  2. How To
  3. Layouts

Stretched Layout in Row

PreviousGrid Form LayoutNextComponents

Last updated 2 years ago

Was this helpful?

The Goal

Design a Stretched Layout in one row, containing Text and Menu Button components.

The Description

Any components sorting in rows can have their Item Flex properties; if it's required to have components responsively on both sides, the middle one has to be stretched.

The Knowledge You Will Get

  1. How to set up Stretched Layout.

The Project Structure

1. Desing a Stretched Layout

Stretched Layout will be separated into two Containers; one would be stretched as a Main; the second would be stretched as a Row.

  1. Place in a new Container, name it cntMain, and set up its Item Flex -> Stretched; Padding -> X-Wide

  2. Place in a second Container with the following setup: ID -> cntRow; Flow -> Into row; Vertical Alignment -> Middle

  3. Into cntRow place three following components, keep their IDs, and configure them properly:

    1. Text -> Item Flex -> None; Value -> "Some Text Here"; Font Size -> Medium

    2. Spacer -> Item Flex -> Stretched; Foreground -> TRANSPARENT

    3. Menu Button -> Item Flex -> None; Font Size -> Medium

The Conclusion

Stretching Layout components need some practice to understand. If more than two stretched layouts are in a one-parent, they would split their space between them.

Follow up on our Stretched Layout in Row tutorial

https://youtu.be/lnVZCyJBwhw
One Row Stretched Layout Application