Stadium
  • Home
  • Academy
  • How it works
    • Designer
    • Application Manager
    • Application users and roles
    • Designing applications
    • User API
  • Features
    • Application
    • Create a Form
    • Embedded Files
    • Events
    • Expression Editor
    • Pages
    • Preview
    • Publish
    • Scripts and Event Handlers
    • Session Variables
    • Settings
    • Styles
    • StyleSheet
    • Templates
    • Types
    • Validations Cheat Sheet
  • Connectors
    • Database Connector
    • File System Connector
    • Web Service Connector
  • Controls
    • Button
    • Chart
    • Checkbox
    • Checkbox List
    • Container
    • Data Grid
    • Date Picker
    • Drop Down
    • Flexbox
    • Grid
    • Image
    • Label
    • Link
    • Menu
    • Panel
    • Radio Button List
    • Repeater
    • Table
    • Text Box
    • Upload File
  • Actions
    • Async
    • Call Web Service
    • Decision (If/Else)
    • Display Message Box
    • Download File
    • For Each
    • Java Script
    • Navigate To Page
    • Notification
    • Set Value
    • Variable
    • While
  • Release Notes
    • 6.12.3272
    • 6.12.3270
    • 6.12.3268
    • 6.12.3264
    • 6.11.3223
    • 6.11.3221
    • 6.11.3220
    • 6.11.3218
    • 6.11.3210
    • 6.10.3155
    • 6.10.3151
    • 6.9.3102
    • 6.8.3100
    • 6.7.3096
    • 6.6.3082
    • 6.6.3081
    • 6.6.3080
    • 6.6.3075
    • 6.5.3055
    • 6.4.3036
    • 6.4.3034
    • 6.4.3033
    • 6.3.3019
    • 6.2.2999
    • 6.2.3001
    • 6.1.2990
    • 6.0.2972
    • 6.0.2970
    • 6.0.2969
Powered by GitBook
On this page
  • Properties
  • Adding items to a Flexbox
  • CSS Help

Was this helpful?

  1. Controls

Flexbox

PreviousDrop DownNextGrid

Last updated 8 months ago

Was this helpful?

The Flexbox control is one of Stadium's Layout controls. You can use Flexbox to display items on a single row or in a single column.

Flexbox renders as a , which means that you can style your Flexbox as you would a standard CSS Flexbox.


Properties

  1. Direction

    Render the items you add to the Flexbox horizontally (row) or vertically (column).

  2. Inline

    Affects the 'display' CSS property of the control.

  3. Visible

    Set to False if you don't want this control to render on the page and be visible to the user.


Adding items to a Flexbox

Single row

  1. Set your Flexbox's Direction property to "Row".

  2. Add your items one next to the other inside the Flexbox control.

Single column

  1. Set your Flexbox's Direction property to "Column".

  2. Add your items one below the other inside the Flexbox control.

Multiple rows and columns

To create a combination of columns and rows you can add Container controls to your Flexbox. Inside the Container controls you can add multiple items on the same row or column.

For example, if you are creating a Flexbox that is intended to predominantly display on a single row, with one item on the row displaying sub-items in a column (i.e. one item below the next), do this:

  1. Set your Flexbox's Direction property to "Row".

  2. Add a Container control as one of the items in the Flexbox row.

  3. Add the relevant sub-items one below the other inside the Container control.


CSS Help

Go for CSS code snippets that you can use in styling your Flexbox and the controls inside your Flexbox.

here
standard CSS Flexbox