Responsive Properties
The following responsive properties are generally available for all elements. Containers also have responsive layout types that determine what additional layout properties its child elements have. These are outlined in the Containers section.
Preset page width (page only)
Custom: Default setting.
Full width: Sets page width to 1200.
Centered: Sets page width to 980.
Mobile: Sets page width to 380.
Width for UI Builder (page only)
Set the width of the page while in UI Builder mode. This option is only available for responsive container layout types (i.e. not Fixed) since these containers at the page level will grow to fit whatever the screen size is in run-mode. In the Responsive tab, you will be able to drag the canvas to see how the layout reacts to different screen sizes.
Parent container type
The container layout type of the parent container. Clicking edit brings you to the property editor of the parent container.
Keep element aspect ratio fixed
Check this box to maintain the current aspect ratio of the element as the parent container is resized. Only available for shapes, icons, and images.
Make this element fixed-width
Check this box if you want the element to maintain a fixed width as the parent container resizes. If not, you will need to specify a minimum and maximum width.
Width
Enter the width of the element in pixels.
Min width
Specify the smallest width the element should be allowed to get as the parent container resizes. This value can be set in pixels or percentage relative to the parent container.
Max width
Specify the largest width the element should be allowed to get as the parent container resizes. This value can be set in pixels or percentage relative to the parent container. If left blank, the maximum width will default to infinite, which means it will stay as wide as the parent container.
Note: Child elements will always try to grow to their max width, unless restricted by other elements or its parent container.
Fit width to content
Check this box to shrink this container to the width of the widest child element or its min width. Otherwise, the container will grow to its max width or the width of its parent container, whatever is smaller.
Make this element fixed-height
Check this box if you want the element to maintain a fixed height even if its content or parent container grows. If not, you will need to specify a minimum and maximum height.
Height
Enter the height of the element in pixels.
Min height
Specify the smallest height you want the element to get in pixels or percentage relative to the parent container.
Max height
Specify the largest height you want the element to get in pixels or percentage relative to the parent container. If left blank, the maximum height will default to infinite, which means it will stay as tall as the parent container.
Note: Child elements will always try to grow to their max height, unless restricted by other elements or its parent container.
Fit height to content
Check this box to shrink this container to the height of the tallest child element. Otherwise, the container will grow to its max height or height of its parent container, whatever is smaller.
Note: This setting is only available on container elements inside a parent container with a layout type of align to parent or column.
X
Enter the x-axis position of the element’s top left corner relative to the parent container in pixels.
Y
Enter the y-axis position of the element’s top left corner relative to the parent container in pixels.
Collapse when hidden
Check this box to collapse or remove the element from its parent container when the element is not visible. This will free up space for other elements to move (if applicable). If unchecked, the element will still be invisible, it will just continue taking up space in the parent element. This checkbox is the way to replicate hidden functionality from the legacy responsive engine.
Allow vertical scrolling when content overflows
Check this box to add a scrollbar to the group container when the content is longer than the max height of the group container.
Scrollbars, especially when in repeating groups, can sometimes cause elements to appear slightly different than designed on certain browsers and devices. This is because Bubble relies on the end-user's operating system and browser to determine how a scrollbar should look.
Group elements in a Fixed container
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Fixed container. Learn more about fixed containers here.
Group elements in a Row container
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Row container. Learn more about Row containers here.
Group elements in a Column container
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Column container. Learn more about Column containers here.
Group elements in an Align-to-Parent container
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in an Align-to-Parent container. Learn more about Align-to-Parent containers here.
Apply gap spacing between elements
Check this box to specify gap spacing between child elements in your Row or Column container. If the container has a Row container, you will be able to specify both row-gap and column-gap values. If your container has a Column container layout, you will be able to specify row-gap values. Gap values will move the position of child elements accordingly and reduce the amount of available space to grow within the parent container - if the child elements are variable width or height.
Note: Gap controls are supported by newer versions of most browsers with the exception of Internet Explorer. Refer to this guide to see if your users browsers are supported.
Row gap (px)
Specify a value in pixels. The row gap value defines the vertical distance between rows of child elements in a parent container. In a Row container layout, the row gap value defines a consistent distance between the first row of child elements as elements wrap to the next row. In a Column container layout, the row gap value defines a consistent distance between child elements as they are stacked vertically.
Column gap (px)
Specify a value in pixels. The column gap value defines the horizontal distance between child elements in a parent container and is only available in Row container layouts.
Other ways to learn
Last updated