Containers (Legacy)

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.

Our Academy quick tip on how to group elements together

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

Watch this video to learn about using the Repeating Group Element

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

Watch our Academy quick tip for examples of each of these layouts

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.

Our Academy quick tip on how to use popups

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

Watch our Academy quick tip on how to set up a 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

Watch our Academy quick tip on how to set up a 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.