Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • Group
  • Type of content
  • Data source
  • Collapse this element's height when hidden
  • Animate the collapse operation
  • Animation style
  • Start/Edit workflow
  • This element isn't clickable
  • Repeating Group
  • Type of content
  • Data source
  • Layout style
  • Rows
  • Columns
  • Cell minimum width for responsive (px)
  • Show partial list on last page if needed
  • Allow more than one column when stretched
  • Separator Style
  • Separator Width
  • Separator Color
  • Start/Edit workflow
  • This element isn't clickable
  • Popup
  • Type of content
  • Data source
  • This popup can't be closed by pressing 'Esc'
  • Grayout color
  • Grayout blur
  • Start/Edit workflow
  • This element isn't clickable
  • Floating Group
  • Type of content
  • Data source
  • Vertically float relative to
  • Horizontally float relative to
  • Floating zindex
  • Parallax effect factor
  • Start/Edit workflow
  • This element isn't clickable
  • Group Focus
  • Reference element
  • Offset top
  • Offset left
  • Type of content
  • Data source
  • Collapse this element's height when hidden
  • Animate the collapse operation
  • Animation style
  • Start/Edit workflow
  • This element isn't clickable

Was this helpful?

  1. Core Reference
  2. Elements

Containers (Legacy)

Last updated 2 years ago

Was this helpful?

Group

Groups are elements that contain other elements. A group has two roles. First, a group gathers elements from a visual perspective, and all the elements in that group move together. It also has a semantic significance. A group can have data injected into it, and the elements inside the group can refer to the Parent group's thing. For example, you can 'display' a user in a group, and all elements inside that group will be able to display the 'Parent group's user's email.' Use this functionality when you want some areas of the app's page to display items relative to a dynamic entry.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

Define the thing or list of things that should be displayed in this container. For example, in groups or popups, only a single thing will display, but for repeating groups a list of things will display. Child elements can access the Data source from their parent. If the parent contains a list of things, the child has access to the individual list items. A common scenario for groups is to display something, like the current user, and then have the group contain the inputs that modify the user's properties, such as text and images that display information about the user. The Type of content determines what kind of thing you are allowed to set in the Data source field. If the type of thing does not match the Data source, it will be marked as an issue, and you must change one or the other to match. The Data source can come from anywhere in Bubble. For example, it could be the result of a search, a custom or built-in Data source, or it could be dynamic and come from the user. The Data source will update when its source changes. For example, if the search result changes because a user modified some data used in the search constraints, the displayed list will automatically change. For additional flexibility, you can update the Data source in the Conditional Formatting Tab in the Property Editor. Finally, the Data source property can be modified by workflows. Changes made by actions override whatever you specify as the Data source directly or as a conditional state until you run a reset action, which then restores the original setting.

Note: As mentioned, Groups can have data assigned to them (e.g. 'this group should show data about user X'). When the data assigned to a group changes, the group will reset all the input fields within itself.

This is useful when the input fields are supposed to change depending on the group's data. But, it can also cause confusion, for example, when a group's data depends on an input that's inside that group!

Collapse this element's height when hidden

By default, hiding an element leaves a blank space on the page, exposing whatever is underneath it. When you select this option, however, the elements below the hidden element are pulled upward to fill the space.

Tip: A common pattern for a messaging UI involves a Repeating Group where cells have two Groups (Sender & Receiver) that display the text sent by each respective party. When the message belongs to the Sender, the Receiver group is hidden and vice versa.

Because of a race condition between evaluating conditional visibility of groups in Repeating Group cells and evaluating cell height, blank spaces may appear when switching between the two groups when a new message is sent.

To minimize the risk of this happening, consider enabling "Collapse this element's height when hidden" on both Groups.

Note: the "collapse when hidden" property may not always work as expected when used on groups that overlap other groups using the setting.

Animate the collapse operation

This option is only visible if 'Collapse this element's height when hidden' is selected. By default, elements collapse and expand instantly, but this option animates with either Fade In/Out or Slide Up/Down.

Animation style

This option allows you to choose whether an element's animation will Fade In/Out or Slide Up/Down.

Note: Animation Style is not currently supported for use on a group in situations where a repeating group's underlying data is changing. In these situations, consider relying on the repeating group's built-in updating instead of adding an animation.

Start/Edit workflow

Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.

This element isn't clickable

When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.

Tip: Conditionally changing the borders of a Group will not resize the content in the group, which can lead to undesirable formatting. Consider using two groups (one without a border), and toggling between the two if this behavior is desired.

Repeating Group

A repeating group displays lists of things, either coming from the application database or from APIs. Design the first cell, and the remaining cells will follow that design.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

This is the list of things to display in the group. It can either be – The result of a search using 'Do a search for,' – The content of a field whose type is list of things, or – The result of an API call through the 'Get data from an external API.' Once this is set, each cell will display one thing, and the elements drawn inside the cell will be able to refer to the 'Current cell's thing.'

Note: Avoid the situation where you automatically change the data source of a repeating group based on a condition that references the repeating group itself! This will cause an infinite loop and the repeating group will not behave as you expect.

Layout style

This is where to define the general layout of the repeating group. Note that this has a major impact on the performance of your pages, as it impacts how many items get downloaded to draw the repeating group. There are five possible options: – Vertical scrolling: The element adds cells as the user scrolls down, but it doesn't push the elements below it. Instead, users keep scrolling. This is efficient as it only loads visible items from the server to display the cells. – Extendable vertical scrolling: The element adds cells as the user scrolls down, and it pushes the elements below down. This is like Facebook's feed and is also efficient for the same reason as above. – Full list: The element draws as many cells as there are items in the data source. This is not the best approach when the list is long, as it loads many items, including some that aren't visible at first. This is not recommended for long lists. – Fixed number of cells: Only shows a fixed number of entries. Use the show next/previous actions to navigate in the workflows. The performance depends on your design, with a low number of cells this is efficient, with many cells it can slow down your pages. – Horizontal scrolling: The element add cells as the user scrolls right. In this mode, the repeating group can only have one row. Given the width of screens, this is usually safe performance-wise. The cells are still expandable if the content inside them is 'Set to stretch to fit content.'

Tip: The different types of repeating groups behave differently when there is too little content to fill even the drawn number of cells:

  • Vertical scrolling, ext vertical scrolling and fixed number of cells will show, at minimum, the number of cells drawn in the editor, even if there is no content to fill those cells

  • A full list repeating group will shrink in height if there's not enough content to fill its cells, potentially even collapsing completely if there is no content

Rows

Enter the number of rows to display in this repeating group. This setting only applies when the layout is set to 'Fixed number of cells.'

Columns

Enter the number of columns to display in this repeating group. Entering 1 will make the element like a list, while a larger number will give a tile aspect to the repeating group.

Cell minimum width for responsive (px)

When the page is responsive, specify the smallest width the cells can have when the page is resized. When the page becomes too narrow for all the cells to have that width, the repeating group displays fewer cells per row.

Show partial list on last page if needed

When the repeating group is set to Fixed number of cells, this controls whether an incomplete last page should be filled with items from the previous page. E.G: If there are 6 items in a 4x1 repeating group, then with this option off, the last page will contain the last four items, items 3 through 6, so items 3 and 4 will be duplicated on both pages; with this option on, the last page will only contain the remaining items, items 5 and 6.

Allow more than one column when stretched

By default, if a repeating group only has one column, e.g., Excel sheet style, no more columns are added when the page is stretched. To change this behavior, check this box.

Separator Style

Select the type of border to display between the cells. Choose from None or a stylized line, such as Solid, Dashed, and Double.

Separator Width

Enter the width to apply to the separator in pixels. Set a width even with a separator of None. In this case, the cells will have some empty space between them.

Separator Color

Select the separator color.

Start/Edit workflow

Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.

This element isn't clickable

When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.

Popup

Popups are hidden from the user until you display them from the Workflow Tab. When they are visible, they are fixed position in the center of the viewport. If the popup is longer than the viewport, the user will be able to scroll to see the full content. If the popup is shorter than the viewport, the user will not be able to scroll.

Tip: If the popup is longer than the viewport, scrolling will be enabled, and scroll distance is tied to the length of the page in the background. If you have a very long page, the user will be able to continue scrolling the entire length of the background page, potentially past the point where the popup is no longer visible.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

Define the thing or list of things that should be displayed in this container. For example, in groups or popups, only a single thing will display, but for repeating groups a list of things will display. Child elements can access the Data source from their parent. If the parent contains a list of things, the child has access to the individual list items. A common scenario for groups is to display something, like the current user, and then have the group contain the inputs that modify the user's properties, such as text and images that display information about the user. The Type of content determines what kind of thing you are allowed to set in the Data source field. If the type of thing does not match the Data source, it will be marked as an issue, and you must change one or the other to match. The Data source can come from anywhere in Bubble. For example, it could be the result of a search, a custom or built-in Data source, or it could be dynamic and come from the user. The Data source will update when its source changes. For example, if the search result changes because a user modified some data used in the search constraints, the displayed list will automatically change. For additional flexibility, you can update the Data source in the Conditional Formatting Tab in the Property Editor. Finally, the Data source property can be modified by workflows. Changes made by actions override whatever you specify as the Data source directly or as a conditional state until you run a reset action, which then restores the original setting.

This popup can't be closed by pressing 'Esc'

By default, popups can be closed by the user when pressing Esc. To disable this behavior and make the popup modal, check this box. In this case, the only way to close the popup is with a Hide Popup action in a workflow.

Grayout color

Select the color of the background when a popup is open. By default, it is set to a dark transparent layer.

Grayout blur

Enter a number greater than 0 to set a blur effect on the background. While this offers an interesting design, the display speed of the popup may be affected.

Start/Edit workflow

Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.

This element isn't clickable

When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.

Floating Group

Floating groups are groups that float on the screen on top of the page but are not contained within the page. These are useful to keep an element in the same place on the screen regardless of the scrolling position of the page or the visibility of groups within the page. Floating groups are useful for headers, buttons like 'Scroll to top,' etc.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

Define the thing or list of things that should be displayed in this container. For example, in groups or popups, only a single thing will display, but for repeating groups a list of things will display. Child elements can access the Data source from their parent. If the parent contains a list of things, the child has access to the individual list items. A common scenario for groups is to display something, like the current user, and then have the group contain the inputs that modify the user's properties, such as text and images that display information about the user. The Type of content determines what kind of thing you are allowed to set in the Data source field. If the type of thing does not match the Data source, it will be marked as an issue, and you must change one or the other to match. The Data source can come from anywhere in Bubble. For example, it could be the result of a search, a custom or built-in Data source, or it could be dynamic and come from the user. The Data source will update when its source changes. For examle, if the search result changes because a user modified some data used in the search constraints, the displayed list will automatically change. For additional flexibility, you can update the Data source in the Conditional Formatting Tab in the Property Editor. Finally, the Data source property can be modified by workflows. Changes made by actions override whatever you specify as the Data source directly or as a conditional state until you run a reset action, which then restores the original setting.

Vertically float relative to

Using this dropdown menu, choose the base to calculate the position of the floating group. Choose from: – Top: The distance between the top edge of the group and the top of the user's screen remains constant, no matter the scrolling position of the page. This is the default. – Bottom: The distance between the bottom of the group and the user's screen remains constant no matter the scrolling position of the page. – Both: Both the top and bottom distances will remain constant, and a scrollbar will appear if the group is too short to show all its content. – Nothing: The floating group will not float, meaning that it behaves like a regular group. For example, the distance is calculated as the height between the top edge of the floating group and the top of the Bubble page. Then, it displays the floating group that distance from the top of the user's screen. Note: By placing the floating group high on the page and making it float relative to the bottom, the element may be 'above' the top of the screen and not display.

Horizontally float relative to

Use this dropdown menu to determine whether the element floats relative to the Right or Left. Right and Left refer to the horizontal edges of the page. This option is less common than vertical reference, but it is useful when you want an element to display no matter the page width.

Floating zindex

Floating groups can be above other elements or beneath the page, and then be used as a background design option. Note that when a floating element is beneath elements, it will only visible if the page background is transparent

Parallax effect factor

When a floating group is beneath the page, you can apply a parallax effect to give some depth to the page. A factor of 1 will remove any parallax effect, while a factor of 0 will keep the element fixed, and a factor of 2 will make the element move twice faster than the scrolling position. A negative number will have the element move into the different direction of the scroll movement.

Start/Edit workflow

Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.

This element isn't clickable

When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.

Group Focus

A group focus is a group that is automatically hidden when the user clicks outside of it. Position it relative to another element. This is especially useful for dropdown menus.

Note: Although the Group Focus container is fixed relative to the page, the iOS keyboard appear event can cause the Group Focus container to move to an unexpected location due to how Apple handles this event.

Tip: The same element can now be used to open and close a group focus element. Best practice would be to use a “Toggle an element” workflow action on the element to simply open & close the group focus.

Note: If you have a searchbox within your Group Focus, clicking one of the searchbox's results will be considered clicking "outside" the Group Focus and therefore close it. A dropdown or custom searchbox are often used in these designs instead.

Reference element

Specify an element to be the location reference for the group.

Offset top

Pushes the group this number of pixels below the reference element.

Offset left

Pushes the group this number of pixels left of the reference element.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

Define the thing or list of things that should be displayed in this container. For example, in groups or popups, only a single thing will display, but for repeating groups a list of things will display. Child elements can access the Data source from their parent. If the parent contains a list of things, the child has access to the individual list items. A common scenario for groups is to display something, like the current user, and then have the group contain the inputs that modify the user's properties, such as text and images that display information about the user. The Type of content determines what kind of thing you are allowed to set in the Data source field. If the type of thing does not match the Data source, it will be marked as an issue, and you must change one or the other to match. The Data source can come from anywhere in Bubble. For example, it could be the result of a search, a custom or built-in Data source, or it could be dynamic and come from the user. The Data source will update when its source changes. For examle, if the search result changes because a user modified some data used in the search constraints, the displayed list will automatically change. For additional flexibility, you can update the Data source in the Conditional Formatting Tab in the Property Editor. Finally, the Data source property can be modified by workflows. Changes made by actions override whatever you specify as the Data source directly or as a conditional state until you run a reset action, which then restores the original setting.

Collapse this element's height when hidden

By default, hiding an element leaves a blank space on the page, exposing whatever is underneath it. When you select this option, however, the elements below the hidden element are pulled upward to fill the space.

Animate the collapse operation

This option is only visible if 'Collapse this element's height when hidden' is selected. By default, elements collapse and expand instantly, but this option animates with either Fade In/Out or Slide Up/Down.

Animation style

This option allows you to choose whether an element's animation will Fade In/Out or Slide Up/Down.

Start/Edit workflow

Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.

This element isn't clickable

When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.

Our Academy quick tip on how to group elements together
Watch this video to learn about using the Repeating Group Element
Watch our Academy quick tip for examples of each of these layouts
Our Academy quick tip on how to use popups
Watch our Academy quick tip on how to set up a floating group
Watch our Academy quick tip on how to set up a Group Focus