How can I display a single row with, say, 20 items, but only show as many as can fit in the current page width dynamically without relying on fixed column counts or manually setting conditions based on guessed screen widths?
I don’t want horizontal scrolling, and I don’t want it to wrap onto a second row either. I want the number of visible columns to increase or decrease automatically based on available space, but still stay on one line only.
Right now, if you untick fixed rows and columns and enable Wrap Horizontally, it behaves almost how I want except it wraps onto a new line, which I don’t want. If you fix the number of rows to 1 to prevent wrapping, then you’re stuck either showing a scrollbar or trying to manually guess screen sizes and apply conditions, which is a nightmare to maintain and extremely inefficient.
It’s honestly really frustrating that this kind of layout one dynamic row that adapts cleanly to the viewport isn’t straightforward to achieve.
Bubble has built in current page width, which is a number, so use that value to know the width of page. Then setup your RG cells to have a certain minimum width, and visual elements to have fixed widths so you can do simple math.
This will allow you to say page width/minimum cell width = how many items I can show
So your RG datasource is whatever dynamic expression with items until and the items until value is the ‘how many items I can show rounded down to zero’
You can do a text with a maximum height. The text will hide automatically if there’s no enough space, showing the ellipsis (“…”).
If you want to have a more elaborated text, you might need to use an HTML element where you place the same list formatted as <span class="badge">Your tex</span>, and then apply some CSS.
This used to be a way to create badges before Bubble released the “Wrap Horizontally” option
This is what I already do but it’s such a faff, if Bubble can do “wrapped horizontally” and it work perfectly they could’ve done a 1 row to do the same without us having to do all of that.
I have to create two states
Page width
Column number
Then I have to do “every time this is true (when page width is not state [page width] > set state page width to page width, and column number to [page width divided by column width: floor]
Then in my RG date source :until column number
It’s such a faff, you cannot copy and paste it into a new page without redoing all of the states.
And a 1 row dynamic columned RG is very common. To be able to dynamically do columns wrapped but not fixed to a row is crazy.
This isn’t about truncating text or using ellipses I’m talking about displaying a row of individual items (like groups or badges), where the number of visible items automatically adjusts based on the available width. No horizontal scroll, no wrapping just a single line that shows however many items can fit, and hides the rest.
Text tricks or span-based badges don’t solve this. It’s a layout issue, not a content overflow one.
You do not need to do that…you just need to do the simple math expression I explained in my reply. No need for states, no need for conditional actions, just one expression to get the number of items to show. That can be done within an arbitrary text operator of an expression, or put into a group as datasource and reference the groups number.
You can always set your RG to have fixed number of rows and put that to one
I see your point.
I mentioned the badge trick because it could be used to achieve what you described: no fix/magic numbers and show only what fits the container
However, your video and message don’t demonstrate what I’m trying to achieve.
I’m specifically asking about a repeating group of cards, each of which contains database driven fields. What you’ve shown is a responsive layout for a formatted text list, which is a completely different scenario.
While your approach may be useful in other contexts, it doesn’t address the original question.
