Horizontal Scroll for Group with RG inside as Table

data1 · 2025-01-17T16:38:32.418Z

I have a table using list A for Y axis and List B for X axis.

Layout like so:

Problem: my Repeating Group B tends to stretch too far out and the cells on the far right will start moving to the next line. Instead I want them to continue stretching right, while a horizontal scroll bar inside Table Group would allow scrolling right and left to see these columns.

I don’t know how to get this scroll bar to show up.

How can I do that?

PS I also have a horizontal repeating group in the header group to populate headers, to match with columns from Repeating group B, but that shouldn’t change the nature of the problem.

krenkel · 2025-01-17T21:04:55.923Z

Hello @data1! I made a very objective model here, I hope it helps you, I made it with one line and three pieces of information, it scrolls horizontally, see print. See if it helps you get an idea of how to make this horizontal scroll.

tela01260×139 3.14 KB

tela02733×426 32.5 KB

tela03757×617 47.7 KB

data1 · 2025-01-18T02:58:16.029Z

I am not sure to understand what you did. Did you set a max width to the horizontal group?

data1 · 2025-01-18T07:43:26.005Z

I’ve tried so many possible permutations now and cannot get this to work…

The closest I’ve gotten is like this:

Insert the whole table into to a single column, single row repeating group not fitting to its content.
Set the table width to an outrageous witdth.

image3684×2244 312 KB

This allows the horizontal scrollbar to happen. But it also creates a huge blank space on the right hand side when scrolling., amd tha tis less than ideal obviously…

I was hoping to set the Table Group to fit to its content would be enough? I tried to set it to 100 % too but no luck.

I’ve also tried to make the columb the main RG group and then put the row RG inside columns but that open another can of worms on so many levels.

O Bubble, why can’t we have a option to turn on horizontal scrolling on groups? It would make life so easier…

krenkel · 2025-01-18T13:37:24.430Z

Okay, @data1 vertical and/or horizontal scrolling requires some testing. In your case, you can set the option to adjust to content and test whether you will have this scrolling permission, because the scrolling will only appear if the content is smaller than the size of the row and column, in your case a row with only a few columns. Even if it were vertical, it would be the same thing, it is required to have a maximum width, otherwise the content will be displayed forever, and the page will become huge.

data1 · 2025-01-19T10:54:30.446Z

Sorry I don’t understand what you are suggesting.

data1 · 2025-01-20T09:06:11.443Z

OK we managed to resolve this with some CSS:

In the page CSS we apply the following style:

<style>
#horizontal-scroll{ overflow-x: auto !important; }
#nowrap-table, #nowrap-table > * { flex-wrap: nowrap; }
<\style>

We apply the ID nowrap-table to the table object (blue Table Group at the top).
We place tge table into another group with a the ID horizontal-scroll

The #nowrap-table > in the CSS is needed because Bubble creates a

below the Table Group and that’s the one that needs to be subject to nowrap argument.

Now our table can have any number of columns and scroll horizontally

system · 2025-03-28T16:39:22.081Z

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