Forum Academy Marketplace Showcase Pricing Features

<Solved sorta> Nested Repeating Groups: How to keep cells on one row

Hey there,

I’m trying to build a report view that has a few different things going on. Here is the editor link: https://bubble.io/page?type=page&name=class-report&id=joyful-literacy&tab=tabs-1

The report needs to function as such:

  • There is a list of students that act as the table rows (Each row is a different student)
  • There are many “Skills” that apply to each student. These would act as the columns in the table (currently implemented by a nested repeating group)
  • There should ONLY be one row of Skills for each student. The reason is to be able to compare students across skills at a single glance, so the like Skills should be directly on top/below of the same skill for the previous/next student.

My Problem:
I can’t find a way to force the nested repeating group to stay on one row. I need the digital version to look as close to the following image as possible:

Any help is appreciated!

Based on my interpretation of the question, I think you should have a separate repeating group for the names and skills and reference them to each other when needed. Sorry if this didn’t help but I didn’t understand the question entirely.

You could use a disabled input to display the student name in its own repeating group and then reference it in the “skills repeating group”.

@potentialthings will this maybe help?
Announcing launch of the Widgets site! Showcase your work and see how widgets are built

Thanks all. The answers you’ve provided makes me realize my question is not very clear. Here’s a screenshot of the application in preview mode:

If you look at the row for Tom Carbone, you’ll see that the letters have broken into 2 lines. This is not what I want, I want the row to stay on 1 line only (which means the user would scroll horizontally). Does this make sense?

If you mean the layout style of that repeating group, you could change it to full list in the editing box of appearance section.

It actually is set to Full List, which is why I’m surprised at its behavior.

How do I bring up the table in the preview mode

If you select a classroom from the first dropdown, it should start to populate.

classroom dropdown is empty

Ah right, you’re not logged in as a user. Hmm, lemme hook the pages up real quick, then I’ll post some instructions.

Ok, here are the steps to get there.

Use this link: https://joyful-literacy.bubbleapps.io/version-test/index?debug_mode=true
Login with username = [email protected] and password = codeless
Click “Reports” on the next screen
Click “New Report”
Click “Class Report”
Select a class from the dropdown

The width of the repeating group is just too long and your page width is small, I think it will work when the page width is around 1300

You have a nice signup page and layout desgin but your page widths are small.

The page has to fit on an iPad Mini, which has a width resolution of 768. That’s the big design constraint I have, unfortunately.

Maybe you could try decreasing the size of the repeating group along with the skills titles

I’m working with @potentialthings on this.

Basically if you treat our nested RGs as an Excel spreadsheet, we want to freeze the first column.

In other words, what we’re looking for is to be able to scroll the whole table at once. We used the nested groups to create a table, and rather than scrolling each row in the table independently, we want to scroll everything - all rows - all at the same time. So the user can continue to view the students’ names on the left, but be able to compare each student on a single column to the right (for example, letter z) that was, upon page load, off the page.

Does that make sense? Anyone know how to do that?

Bumping this because I feel stupid. The app is public and can be found HERE (for the editor)

I can’t believe I haven’t figured this out yet, but this is a critical part of our application. We’re trying to replicate the “whole class view” a teacher would see from the Circle Chart page I posted above, but we either get into a situation where each row scrolls independently (eliminating the easy-to-glance-at component) or one student row ends up having 2 rows of ratings (also eliminating the glanceability). Any help is most appreciated, and I’d be glad to walk someone through on a screenshare if it helps.

Solved this, but not happy about it. I made the page crazy wide, then made sure to keep the number of columns on each row maxed out to meet my specific needs. Feels hacky, but it works for now. Thanks for all who tried to help!

Would there be a way to have it set up like this (format-wise, ignore the data):

My idea would be to put everything into one fixed-width group so everything is lined up, and then place the repeating group of Skill Names and Skill Values into their own group. Then using an HTML element, enable horizontal scrolling (only for Skill Names and Skill Values). That would keep the list of Student Names fixed to the left, and allow teachers to scroll horizontally through Skill Names and Skill Values only. I don’t know much code and am not sure if this will work but maybe it’s worth a try? :slight_smile:

Enabling vertical scrolling using HTML was done in this thread:

1 Like