RG - Are Dynamic Columns Possible?

I’m attempting to generate an RG with a horizontal list of cells, where the number of cells (columns) should dynamically go as wide as the page size (cell min/max width 100) and then allow scrolling for the remaining off-screen cells.

I’ve tried using CSS Tools to set the width of the RG dynamically to the page width but despite getting the CSS to set the width of other elements, I can’t get it to set the width of an RG (even when it is inside a Group). @jarrad is this possible? or @vincent56 you really dived into CSS Tools … do you think this is possible?

Then I tried a horizontal scrolling RG with ‘Allow more than one column when checked’. I made the page width (pale yellow) and the RG width (grey) 100 and set the cell min-width to 99.

When I preview it live, the RG (gray) is stretched across the full page but it only shows the specified number of columns (1 or 3 or 6 …) plus one more. If you then swipe left it will add another and another until it gets to full page width. So it appears this won’t work for me either.

On this forum, I’ve seen people suggest using multiple RGs of different widths (that means 20 RGs in my case) with conditionals to display the right one. But my software training has DRY so ingrained that I can’t do that unless there is quite simply no other way. :worried:

Editor view here : swipe-to-del | Bubble Editor

All suggestions gratefully received.

1 Like

I searched on Google and found no evidence that this functionality is possible in Bubble but what do you mean by your software training is DRY and you can’t do that final suggestion? Is it a technical issue or you mean, it’s about time?

Even with hacks and workarounds i dont I believe this one is possible… Certainly not for a production environment… You only need to look at bubbles own pricing page and their own use of horizontal repeating groups to give you your answer in my view…(Just my humble opinion)

The other option is to detect the page width and then show and hide repeating groups which are centred with differing amounts of columns… I find that quite abhorrent but if you are hellbent on using horizontal repeating groups…

Thank you @arto.eg - by DRY we mean Do not Repeat Yourself. So we only code something once and only have to maintain it in one place. Make’s for easier and cheaper and less error-prone maintenance. So it’s just one of those things that is so ingrained that I struggle not to obey :slight_smile:

1 Like

Thank you @Bubbleboy - you’ve been at this longer than I have so I’m inclined to believe you. As you say, I find the show/hide of, in my case, up to 20 RGs abhorrent… but I’m not hellbent on using horizontal repeating groups. I’m not really using the RG functionality other than have it scroll to next/previous cell’s content.

I have used drag & drop groups to allow users to swipe back and forth on either the tabs or the card below (see link below). So I’m relying on workflows not RG functionality really.

https://swipe-to-del.bubbleapps.io/version-test/tab_card_swipe?debug_mode=true

Can you suggest an alternative? Would simply displaying Texts with conditionals so the displayed content changes on a swipe right/left be the route to go? You mentioned animation previously so I’m thinking that might be what you were hinting at.

I know you have a real penchant for repeating groups with swipe functionality but might be useful to take one step back from moment and just rethink why? When I 1st started using bubble I assumed the repeating group was the way to go but after much trial and error realised it wasn’t in my case anyway… I now use hammer.js to detect events both keyboard and gesture and action content based on that result.

Well I only have a penchant for RGs because they are the only way I know how to build the UX/UI I have to build. I’d happily take the approach you suggest but I haven’t written code for 28 years so I’ve no idea how I would use hammer.js. I have been using a little HTML and CSS I found on CodePen so I’m ok at basic code but beyond that I’m lost.

How would I use hammer.js - is it code that is placed in a bubble element? And, is there somewhere online like Codepen where I can grab a bit of code to detect gestures?

i had my mobi up the wrong way but https://s3.amazonaws.com/jff/IMG_0856+(convert-video-online.com).mp4
you’ll see what i mean

@Bubbleboy - I’ve just built a quick test using drag and drop groups and I think it might work. But, before I waste any more time can you tell me if you think I’ve headed a direction that will work or if I need to learn hammer.js please:

  • I can detect swipe left or right using drop areas
  • I can detect tap by placing buttons in the top level drag/drop group that I swipe

Then I can move the drag/drop group behind everything else using coordinates. It contains the text for tabs. This lower drag drop group can be wider than the screen so it will show as many or as few tabs as can be fitted. This approach means I need as many ‘move drag/drop group’ actions as I have tab buttons but that seems more acceptable and manageable than 20 RGs.

If you’ve got a few minutes to give me your thoughts I would greatly appreciate it.

just provided a video… this supports swipe, touch and keyboard control…there are many ways do do stuff in bubble… you have to find what you are comfortable with

Have you a link to the video please?

try the link here…should work RG - Are Dynamic Columns Possible?

That is absolutely perfect. Now to find out how I can build it :slight_smile:

i did this a while back…hammer.js and @mishav toolbox. I think there is now a plugin from @levon detection zone (ive not used it but im pretty sure it does this stuff)…

@Bubbleboy i guess you are referring to this plugin? Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode

@levon actually it was this one https://zeroqode.com/plugin/touch-and-mouse-events-detection-1528969347711x903929832670494700

@patricia this is what you want… cheap as chips…(i mean inexpensive…blush) dependant upon your skill level you could hand crank it yourself or just make life easy and go down the plug-in route

Thank @levon and @Bubbleboy - I’m going to go experiment now.

I eventually got this working very simply using bubble’s Draggable elements, bubble’s standard horizontal scrolling RG, a little page header CSS to hid scrollbars added with Zerocode’s CSS Tools. Was simple in the end. [WORKING] Swipe tabs and cards beneath simultaneously

1 Like