How to create responsive "table", using repeating group, that scrolls horizontally when page is made narrower

Hi Everybody,

I’ve been bashing my head on this for the last couple of days, and have concluded that this requirement cannot be done in Bubble, but I hope you can prove me wrong! Please help if you can.

The requirement is that I have a “table” of several hundred records of results from the database displayed in ten columns. I’m implementing that using a repeating group.

The “table” and the rest of the content on the page is responsive and content wraps to fit the page width.

However, I would like the “table” to only resize down to a certain minimum width so that, when the page is made narrower, the “table” will scroll horizontally (not the rest of the content of the page, but just the “table”). This is so that content in the columns of the “table” will not wrap down to meaningless sizes.

I have seen this done elsewhere, but I cannot work out how to do it in Bubble using repeating groups.

Is this impossible to do in Bubble?

Thanks,

Francis Burns

Hi there,

This is definitely not impossible, your approach should be using various groups inside of each cell with a minimum width set, and possibly placing your table inside another group to allow the spill/scroll to kick in.

1 Like