Viewing Repeating Groups Wider than screen size on mobile device

Need help
1

Hi,

This may be a dumb/stupid/poor question but here goes.

Having developed for desktop an app over 3-4 months for our business I now need to go through each page and make it responsive. In retrospect I wish I had designed each page for desktop and mobile at the same time but whether good or bad the decision was made. Now I am studying responsiveness I realise I would have done quite a number of things different to make life easier from the outset… anyways.

We have a page that is used to search and filter study routes and then the user can view a summary of data in a repeating group before clicking through to a detailed profile. The repeating group is one column of about 30 rows right now. It is 1280 pixels wide. It would be very time consuming and difficult to split up and also not that useful. The idea is that users can compare the data like ranking, location, costs and other details by having side by side. So having all the data in a very tall cell, followed up another defeats the object. Therefore I created the top area with filter and sort options to be responsive (i.e. mobile width) but planned beneath it to show the repeating group with cells 1,280 pixels wide and allow the user to scroll left and right on the cell phone so they can view say on their 360 pixel phone any section of the repeating group and then scroll up and down to compare data. Hopefully that makes sense.

The issue is that after implementing this whilst I can scroll up and down through the repeating group it is not possible to scroll left and right (the screen is just locked) so cannot see all the data in the 1,280 pixel wide repeating group cells.

Is what I am trying to do not possible or should it work (maybe I am just missing a minor setting change).

Any advice will be really appreciated. Basically the question is how to allow mobile users to view all (scroll left and right) of repeating groups that are wider than their screen. No doubt this is bad practice but the alternative would a) take loads of time and b) not actually be as useful for the user.

thanks!

2

Try nulling the page responsiveness

3

you could put both repeating groups into a group and add a horizontal scroll onto the group using some basic CSS…this way, both repeating groups can be scrolled horizontally at the same time, since you’d be scrolling horizontally a container group

4

I guess that will not work as the first part of the main body will be responsive. The first part is a group to choose filters and sorts but I will look at this and Google how to null the page responsiveness and play around. Thanks for the suggestion.

5

There is only one repeating group with the top group with filter and sort options being responsive and full screen whatever device size until hits max width.

But it sounds like this may work if I put the repeating group into a group . I am not sure how to add a horizontal scroll but probably some Googling with solve that. Will take a look and report back. Thanks!

6

After your response which gave me ideas and some googling I did manage to mess around and get a solution for me. So this is a repeating group 1280 pixels wide with one column and vertical scrolling through 30 or so rows. By nesting this in another RG that has horizontal scrolling and 1 column (not sure if I need to but I used User as type and searched for user list with same unique ID as current user to get a 1 item list). Then is works almost perfectly to allow to scroll down through RG rows on device and scroll left and right through the 1,280 pixels width of the single column. I guess I have done this in a messy way but works so happy…

7

Sounds like a true no-code solution that gets the same functionality I was explaining but without the need for CSS…good on you for having the mentality to forge forward and get creative in solving your issue

8

This topic was automatically closed after 70 days. New replies are no longer allowed.