How to prevent horizontal scrolling and wrap items to the next line in selected filters?

Hello everyone!

I’m facing an issue in my Bubble app and could really use your help. I have a section where selected filters are displayed, but when I choose more than 6 items, an unwanted horizontal scroll appears. What I actually need is for the filters to automatically wrap to the next line when they reach a certain width limit, instead of creating a horizontal scrollbar.

Here are the settings I’ve already tried:

:one: Main Container (where filters are displayed):

It’s a Group, not a Repeating Group.
The Layout is set to Row, as I want the items to be aligned side by side.
Max Width is set to 1000px, since that’s the point where I want the filters to start wrapping to the next line.
Min Width set to 50%, to prevent the container from shrinking too much.
*Overflow is not enabled, so technically, horizontal scrolling shouldn’t appear.

:two: Selected Filters (Items inside the Group):

Each filter is inside an individual Group, also set with Row Layout.
I have tried enabling “Fit width to content”, but it didn’t solve the issue.
I also adjusted Min Width and Max Width, but the items keep forcing a horizontal scroll instead of wrapping to a new line.

:three: Additional tests I’ve done:

Tried using a Repeating Group, but it doesn’t have an automatic wrap option.
Adjusted **Margins and Gaps to make the elements more compact.
In the Responsive Editor, I can see that the filters keep expanding horizontally instead of rearranging to a new line.

Has anyone encountered something similar or has any idea how I can fix this? Is there any specific setting in Bubble that I might be missing?

Any help would be greatly appreciated! :rocket:

This topic was automatically closed after 70 days. New replies are no longer allowed.