Zingy Docs
Visit our websiteTry a DemoPricingContact
  • Introduction
  • 🎛️Dashboard
    • Overview
    • Apps
    • Account Profile
    • Billing - View Invoices
    • Billing - Payment Methods
    • Billing - Subscription
  • 💻App Editor
    • App Components
    • App Editor Tour
    • App Settings
    • App Users
    • App User Groups
    • Publishing your App
    • Pages and Forms
      • Create a Page
      • Create a Structured Page
      • What is a Structured Page ?
      • Create a Form
      • Page Editor
      • Working with Forms
    • Page Editor
      • Page Editor Tour
      • Adding Page Content
      • Adding Content to Structured Pages
      • Working with Page Elements
      • Page Element Settings
      • Responsive Design
      • Padding and Margin
      • Editing Text
      • Using AI Wiz in the Page Editor
      • Built-in elements
        • Link
        • Image
        • Spacer
        • Flexible Area
        • Layout Container
        • Layout Row
        • Layout Column
        • 1 Column
        • 2 Columns
        • 3 Columns
        • Add Column
        • Table
        • Table Row
        • Table Column Cell
        • Table Heading Cell
        • Table (3 cols)
        • Table (4 cols)
        • Input
        • Checkbox
        • Toggle Switch
        • Dropdown
        • Multi-line
        • Label
        • Button
        • Button Group
        • Input Group
        • Button Toolbar
        • Menubar Holder
        • Menubar Collapsible
        • Menubar
        • Menubar Item
        • Menubar Item Link
        • Menubar Style1
        • Menubar Style2
        • Menu Item
        • Popup Menu
        • Popup Menu Item
        • Menubar Popup Menu
        • Popup Menu Style1
        • Popup Menu Style2
        • Popup Menu Separator
        • Card
        • Card Group
        • Card Style1
        • Card Style2
        • Card Style3
        • Alert
        • Badged Text
        • Collapsible Area
        • Data Table
        • Stripe Payment
        • Form
        • Menubar Login Info
        • Data Design
      • Working with Forms
      • Using Forms
      • Page Preview
    • Page Settings
    • Page Flow
      • Block Anatomy
      • Toolbox Blocks
        • Set Content
        • Get Content
        • Badged Text
        • Alert Text
        • Status Animation
        • Set Style
        • Set CSS
        • Set Input Value
        • Get Input Value
        • Set Toggle Switch State
        • Get Toggle Switch State
        • Set Input Feedback
        • Enable/Disable Element
        • Set Element Attribute
        • Get Element Attribute
        • Get Element by Name
        • Element
        • URL Parameter Value
        • Navigate Page
        • Timer
        • Timer Repeat
        • Show Popup Form
        • Show Information Popup
        • Show Confirmation Popup
        • Popup Form Data
        • Collapsible Area Action
        • Mouse/Keyboard Action
        • Event Action
        • Action/Event Info
        • Show Menu
        • Menu Text
        • Menu Index
        • Write Log Message
        • Log Category
        • Data Table Action Menu Customize
        • Data Table Attach Form
        • Data Table Add Action
        • Data Table Load Next Page
        • Data Table Load Prev Page
        • Data Table Refresh
        • Data Table Custom Query
        • Data Table : Table Name
        • Data Table : Data
        • Content from Data Design
        • Set Content in Data Design
        • Get Content in Data Design
        • Get Element Attribute in Data Design
        • Set Element Attribute in Data Design
        • Set Style in Data Design
        • Set CSS in Data Design
        • Set Input Value in Data Design
        • Get Input Value in Data Design
        • Get Toggle Switch State in Data Design
        • Set Toggle Switch State in Data Design
        • Set Input Feedback in Data Design
        • Enable/Disable Element in Data Design
        • Initialize Toggle Switch in Data Design
        • Event Action in Data Design
        • Collapsible Area Action in Data Design
        • Data Record Count
        • Data Record at Index
        • Data Record Loop
        • Data Record Info
        • Data Record Loop Index
        • Data Record ID
        • Data Table Name
        • Data Query Name
        • Data Read
        • Data Read Next
        • Data Read Previous
        • Data Lookup
        • Data Lookup with ID
        • Data Status
        • Data Add Record
        • Data Update Record with ID
        • Data Delete Record with ID
        • Data Input Popup
        • Lock/Unlock Form
        • Save Form with Data
        • Reset Form
        • Set Form Event Status
        • Set Form Event Status Message
        • Form Submit Complete
        • Set Field Input Value
        • Get Field Input Value
        • Form Data
        • Form in Edit Mode
        • Form Events
        • Execute Connection Command
        • Execute API Call
        • Connection Data
        • Connection Error
        • API Call Connection
        • Connection
        • Connection Command
        • Cloud Flow Invoke Hook
        • Cloud Flow : URL of Web Hook
        • HTTP Post
        • HTTP Get
        • HTTP Data
        • HTTP Error
        • Date
        • Custom Code
        • Date from Text
        • Get Object Property
      • Coding in Page Flow
      • Zingy API For Page Flow
      • References
        • Value Types
        • Popup Customization
        • Prerequisite for Dynamic Content block examples
        • Prerequisite for Data examples
    • Dynamic Content
    • Data
      • Database Tables
      • Database Queries
      • Data Tool
    • Cloud Flow
      • Cloud Flow Editor
      • Block Anatomy
      • Toolbox Blocks
        • Data Update Records
        • Data Delete Records
      • Coding in Cloud Flow
      • SDK/Library Integration
    • Media
    • Connections
      • Services
        • Stripe
        • Sendgrid
        • Twilio
        • API Call
        • API Key
Powered by GitBook
On this page
  • Options
  • Inline
  • Horizontal Align
  • Vertical Align
  1. App Editor
  2. Page Editor
  3. Built-in elements

Flexible Area

PreviousSpacerNextLayout Container

Last updated 1 year ago

The Flexible Area element is available under the 'Layout' category.

In general, elements on a web page can be divided into two categories based on how they occupy horizontal space:

  1. Elements that only allow other elements to be positioned above or below them on the page.

  2. Elements that allow other elements to be positioned to their left or right, as well as above or below them.

The Flexible Area element enables you to arrange elements side by side, even if they would not typically allow such positioning. This element provides the flexibility to create layouts where elements can coexist horizontally, hence the name Flexible Area.

The same elements when placed inside a Flexible Area element get rendered as shown below.


Options

Inline

When set to Yes, allows the elements next to the Flexible Area (not inside), to be rendered to the left or right and above or below it. This setting has no bearing on how the elements placed inside the flexible area get rendered.

Horizontal Align

Controls how the elements inside the Flexible Area are spaced horizontally.

The possible values are:

  • Left: Aligns the elements inside the Flexible Area towards the left.

  • Center: Aligns the elements inside the Flexible Area towards the center.

  • Right: Aligns the elements inside the Flexible Area towards the right.

  • Space Around: Equally distribute the available space before and after each element.

  • Space Between: Distribute the available space between the elements.

Vertical Align

Controls how the elements inside the Flexible Area are spaced vertically.

The possible values are:

  • Default: Same as Stretch on most browsers.

  • Top: Align the top of the elements together at the top of the Flexible Area.

  • Center: Align the center of the elements together at the center of the Flexible Area.

  • Bottom: Align the bottom of the elements together at the bottom of the Flexible Area.

  • Stretch: Equalizes the height of all the elements.

  • Baseline: Elements are aligned such that their baselines align.

The example below shows Image, and elements placed on the page. Since the element in default mode occupies the entire horizontal area, the Image and Button elements are rendered above and below that by the browser.

Within the flexible area element, you have the freedom to effortlessly drag and drop various elements such as , , , , , , , , etc. However, it's important to note that certain elements may have specific restrictions. For instance, a can only be added to a , adhering to its designated usage.

The settings for this element are described below:

This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.

Default: Same as Left or Right depending on the of the user.

This setting has support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting.

💻
Text
Button
Text
responsive design
locale
responsive design
Image
Alert
Badged Text
Link
Flexible Area
Button
Layout Column
Layout Row
Text
Heading
Options tab
Flexible Area Element