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:
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.
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.
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!