Best practice for mobile responsive repeating groups

What’s considered best practice when designing an app with repeating groups that must be mobile responsive?

I think a header should be above the repeating group when in full screen mode, but it would need to hide as the screen size reduces, and then show adjacent to each data field.

Is this considered best practice?
It would mean creating additional text elements with conditionals.
This just seems like an inefficient way of doing it and possibly requiring significant effort to make the mobile responsiveness work properly.

Also is it better to add headers within the first row with a condition to hide in subsequent rows.
Or is it better to place headers above the RG?

What I would do is to hide the columns as the page resizes…in order to still have access to all data add a column that will store some kind of icon or something to trigger the function to show the user an ability to either see a popup with all details, groupfocus with all details or to actually just change one of the columns data so they can switch the data.

You can also set it up so that on hover of a particular cell a group focus shows with all data.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

Stripe Integration Course

NoCodeTrainer.com

1 Like