Horizontal scroll on repeating group - how?

[thethinklab.au]

I’m trying to get the behaviour shown in this official bubble video: https://www.youtube.com/watch?v=J6mvea8B1Wk

On desktop, my tabular options are fine (note ‘ALL PLAYERS’ is a static text element, and teams ‘1ST GRADE’ through ‘4TH GRADE’ are a repeating group):

However, when I narrow width down to what would appear on a mobile browse, the repeating group wraps:

I basically want everything to appear on one line, with only a horizontal scroll on the group and not the whole page. I also would like to hide the scroll bar that appears…

This is editor for the repeating group:

And this is the editor for the parent group, that contains my text item and repeating group:

Thanks !

[dorilama]

What are the settings on the layout of the repeating group?
Try with min width 0, max width inf, uncheck fit width to content.

Cheers
Mariano

[thethinklab.au]

Had min with 0 and max width inf, unchecking fit width to content helped me make progress:

Result:

Editor:

I guess the issues now are:

1. Because the ‘All Players’ isn’t part of the repeating group, it’s treating it differently - any idea on how I should be building this? Essentially, all users will see ‘All Players’ but not all users will be able to see teams. Teams are stored in the database, where as All Players is static on page:
   

2. I want to hide the scroll bar (brief forum searching shows I’ll need to do some hacky HTML/CSS to hide this…)

[dorilama]

1. My first thought is: either create a “team” that represents “all players” and is visible for everybody (you keep the repeating group as a list of teams and you know that when this particular team is selected you need to treat it in a special way), or you use a list of texts where you put the name of the teams plus the text “all players” (if you need to reference the team then you need to search it again based on the text)
   For the second option you can create the list like that (pretend that the search is for teams instead of my data type)
   

   

• add an id to your repeating group
• add some style to the page:
  
  I think you need a paid plan to make the HTML header work, as an alternative you can look for plugins that let you add css.

[chike.ezeiru]

Okay,

I achieved something similar on

I did this by creating a table group(row direction), then inside that I put 2 groups (one group and one repeating group - on the right).

The repeating group is responsive, but the elements(groups) in it have a minimum width that is wider than the minimum width of the repeating group. This ensures that on smaller page widths(devices) the contents of the repeating group can scroll horizontally.

[thethinklab.au]

You’re an absolute saint! Both suggestions worked perfectly!

For the benefit of any others that are looking for a similar solution - In regards to #1, I went with the second option. The first option worked, however, I wanted to avoid having that record in my database. Privacy controls may evenetually prevent people being able to see the ‘All Players’ data as it wouldn’t have any teams/clubs/users associated with it.

Thanks!!!

[dorilama]

Happy to help

Cheers
Mariano

[thethinklab.au]

Hi Chike,

Thanks for taking the time to input. I ended up going with dorilama’s solution as I want all items to scroll rather than keep the first fixed.

However, I will look to use your solution in an upcoming screen I am building where I need the first column fixed!

[chike.ezeiru]

You’re welcome Alex!