Have a repeating group that has 7 items of information for each cell. It fits straight across on desktop but when on mobile it only fits 3 of those items horizontally, dropping 3 more below it and another 1 below that making the info very difficult to decipher. How can I make it so that each item in the repeating group stays in just one row and you can scroll horizontally to view the last 4 columns? Ive tried setting the repeating group to horizontal scrolling but then it displays each row of the RG all in one row.
This is easy on the new engine.
Put all the 7 elements inside the RG cell into one parent cell. Give that parent cell a fixed width of whatever is required to accommodate all the 7 child elements in one row.
This way when the width drops below the fixed width, it will start scrolling horizontally.
1 Like
sorry I am pretty new to this. What do you mean by pout them in a parent cell inside the RG? Like put them in their own group? I tried that and it stays the same way as before on mobile
This might help: Bubble New Responsive: Repeating groups and Table - YouTube
Similar to this, (I have the scroll working on a RG), any idea how this same behavior can be applied to standard group? (non repeating?)
Cheers
I was trying to do the same thing since I have group acting as a header for my RG but ended up having to throw the text in the group into an RG with just one column, one row in order to make it scroll. Next step is trying to figure out a way to make them scroll together.
There might be other ways, but the following approach uses custom CSS (just one property actually)…
Element hierarchy
Custom CSS
The style is targeting the grpScroller element.
<style>
#table-scroller-01 {
overflow-x: auto !important;
}
</style>
2 Likes
This topic was automatically closed after 70 days. New replies are no longer allowed.