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.