Containers
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
A Group's container layout defines it's and it's child elements responsive behavior. See more in Container Layout Types.
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.'
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!
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.
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.
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.
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.
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.
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.
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.'
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.
Check fixed number of rows or column if you'd like to display a fixed number of rows or columns in run mode, regardless of the screen size or number of entries in the List. Check both boxes to recreate the legacy Fixed number of cells repeating group layout.
Check this box to have the repeating group show a fixed number of rows. Cell height will be determined by the height of the overall repeating group container divided by the number of rows specified. Use the show next / show previous workflow actions to paginate the table and show more data.
Set the number of rows you’d like to display.
Check this box to have the repeating group show a fixed number of columns. Cell width will be determined by the width of the overall repeating group container divided by the number of columns specified. Use the show next / how previous workflow actions to show more data.
Set the number of columns you’d like to display.
Check this box to show a less than specified number of rows or columns on the last page of a paginated table if needed.
Uncheck fixed number of rows or column if you'd like to display a dynamic number of rows or columns in run mode - i.e. to recreate legacy vertical scrolling or horizontal scrolling repeating group layouts.
Specify a minimum Repeating Group row height. The Repeating Group will default to filling as many cells as the data allows at the minimum height, and then grow in size evenly to fill the remaining space.
For example, if you have a repeating group with a height of 440px, a min height of 100px, and 5 entries in your List, the repeating group in run-mode will initially show 4 cells at a height of 110px each.
If Set fixed number of rows is unchecked, choose whether to stretch rows to fill vertical space. If rows at min height aren't tall enough to fill vertical space, each row will stretch in height to do so.
Specify a minimum Repeating Group column width. The Repeating Group will default to filling as many cells as the Repeating Group Container width allows at the minimum cell width, and then grow in size evenly to fill the remaining space.
For example, if you have a repeating group with a width of 440px, a min width of 200px, and 10 entries, the repeating group in run-mode will initially show a repeating group with 2 columns at a width of 220px each.
If Set fixed number of columns is unchecked, choose whether to stretch columns to fill horizontal space. If columns at min width aren't wide enough to fill horizontal space, each column will stretch in width to do so.
If this setting is unchecked, the amount of data that is loaded will not impact the number of columns rendered on the page. For example, if 6 columns are able to fit within the Repeating Group container, but there are only two pieces of data in the List, 6 columns will still be rendered. On the other hand, if this setting is checked, the two columns with data will stretch to fit the amount of space available.
If Set fixed number of rows and Set fixed number of columns are both unchecked, choose the direction you’d like the repeating group to scroll.
Select this option if you'd like your repeating group to scroll vertically if the amount of rows takes up more space than the parent container allows. This is usually the most common option.
Select this option if you'd like your repeating group to scroll horizontally if the amount of rows takes up more space than the parent container allows.
Select this option if you'd like the items in your repeating group to wrap to a new row if the number of items takes up more space than the parent container allows. Use this setting if you'd like to create a "tag" like list where columns fit width to their content and do not need to be evenly sized.
Check this box to load all of the data right away. This is similar to legacy Full List repeating group behavior.
A repeating group cell is a container as well and can have one of the following 4 container layout types: Fixed, Align to parent, Row, and Column. Select the appropriate container layout type depending on what child element behavior you want.
Select the type of border to display between the cells. Choose from None or a stylized line, such as Solid, Dashed, and Double.
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.
Select the separator color.
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.
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.
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.
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.'
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.
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.
Select the color of the background when a popup is open. By default, it is set to a dark transparent layer.
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.
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.
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.
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.
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.'
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.
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.
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 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
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.
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.
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.
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 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.
Specify an element to be the location reference for the group.
Pushes the group this number of pixels below the reference element.
Pushes the group this number of pixels left of the reference element.
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.'
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.
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.
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.
This option allows you to choose whether an element's animation will Fade In/Out or Slide Up/Down.
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.
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.
Last modified 8d ago