Horizontal Scroll - UX/UI issues

Need help Responsiveness
1

Can we please please set the number of cells we want pre-populating in the RG on page load? Does anyone know how to do this with JS or can we have it natively? I build my repeating groups single cell because IMHO it’s the best way to get a really responsive design. But cells showing up blank until the user scrolls is bad UX.

The main issue is with horizontal scroll, because the user doesn’t even know they can scroll through the group. Unless the group is built at it’s maximum width in the editor, the next cells are blank and it looks strange.

ps. I don’t want to use a plugin.

4 Likes
2

+1 Having the ability to adjust the number of rows in an RG depending on the device or the size of the screen would be a plus.

1 Like
3

Hi Duke,

There might a simple JS work-around, but I’m not sure I understand the issue or the desired behavior. I haven’t done much with horizontal scrolling, but I just configured a single-column horizontally scrolling RG, and a scrollbar appears at the bottom. :neutral_face:

4

@sudsy are there fewer cells in your editor than in your preview?

5

Yes, there’s a single cell in the editor. Could you share a screenshot of your properties panel for the RG?

6

23
23905×841 41.5 KB
21
22
221507×363 119 KB

There are 5 data points. It’s only loading 3

1 Like
7

26
261482×415 98.2 KB

the rg is wide enough to accommodate all of them. They just don’t load right away. I need to shift-scroll on desktop to get more records to load.

8

Ah, ok. I had “fixed width” enabled. I see the issue now. Let me try something. I’ll report back…

9

Turns out the capability’s been there all along using pure Bubble - no JS required. Here’s the answer…

rg-scroll
rg-scroll902×1202 69.7 KB

Basically, just scroll to the desired RG element on page load. My RG can display 7 items but shows only two when previewed. However, if I want to show 5, I just add an action on page load to “scroll to entry #5”.

Easy as pie. :wink:

10

@sudsy Thank you for replying. Yes that’s the unfortunate workaround I’ve been using for the last four months. On page load I scroll to last entry, then scroll back. I animate the scroll back in the unlikely event that a user beats Bubble’s script to seeing the rg scrolling back.

Then I had the use case that that specific RG was in view on page load. I built a cover for it with a spinner, that checked when the RG was done loading and faded out. Worked. DId the scroll back scroll forward trick, but then bubble doesn’t know when the RG was done scrolling, so faded halfway through and it looks bad. Next I was looking at building an “in-view” function in jquery like I use for fade-in when elements are in viewport. No luck there either, because horizontal scrl group technically have their first item in view and it doesn’t go “out of view” until the user horizontally scrolls past. Soooooo now I’m reading threads and I’m sure putting in the hours. However, I feel like it would turn off less stubborn people than I to have to work through hacks to get what seems to be a very popular UI display tool (Insta, Gplay, Facebook all use horizontal scrolling groups) to work properly.

So I was just wondering if there’s a way to get RG’s to force load/force display a specific number of cells with JS, jquery or if it was possible for the @bubble team to let us do this “natively” (eventually, I know you have your hands full with performance). I know that there have been posts about the rg’s not loading on mobile, ext. scrl rg’s misbehaving, and my own ext. scrl rg’s not loading even one full row of data if the page is too big (i.e., only loading the first four records even though the RG has space for five on the page.).

But again, thank you for taking the time to respond. Any other ideas?

11

Yeah, I guess I didn’t fully understand the requirement from the description in your initial post. Sorry.

My current understanding is that you’d like a way to specify the number of cells to load without actually scrolling the contents. That last part wasn’t clear to me.

Stated another way, you’d like to be able to specify a certain number of cells to “preload” and then have them render with the scroll position remaining zero, right?

Seems like a legitimate request, but I have no further suggestions. I can imagine a simple Number of Cells to Preload option in the properties panel, though. I can see that being useful. :slightly_smiling_face:

1 Like
12

One way I have tried to address this is as follows.

The data source to the RG is a fixed number of entries, with Horizontal scrolling and Fixed number of columns. I place it in such a way that the users automatically understand that they need to scroll horizontally (only on mobile). I have an internal group for each cell with fixed width set which contains all the other individual items.

Check out the Recommended for you section on a mobile device at this below link for an example. On the desktop it only shows three entries, but on mobile it is presented in such a way that a user can horizontally scroll and find 6 entries.

Ofcourse,
This approach has a few limitations where you cannot scroll on desktop (as I intentionally removed the scrollbar via some custom css, but still gives me a decent UX atleast on Mobile (which works for me).

Not sure if you have a similar requirement. Let me know if you need more screenshots of my setup, etc.

13

The following approach loads the content for all visible cells (up to 100) without scrolling. Any cells that aren’t at least partially visible on the page will be loaded only through user interaction (once the user starts manually scrolling).

  1. Enable element Ids in the app settings.
  2. Give the RG an id (“repeating-group-id” in this case).
  3. Put an HTML element on the page, and add the following:
<script>
$( function() {

	var timer,
	    count          = 0,
	    MAX_ITERATIONS = 100;

	timer = setInterval( function() {
		$( '#repeating-group-id' ).scroll();
		if ( ++ count > MAX_ITERATIONS ) {
			clearInterval( timer );
		}
	}, 10 );
});
</script>

This works great for my purposes. In fact, for mobile performance reasons, I’d rather not initially load more content than would be visible on the page. Tested in Chrome, Firefox, Safari, and Opera. (Haven’t tested in Edge yet. If someone does, let me know if it works.)

-Steve

7 Likes
14

@sudsy I owe you a coke.

15

Very glad if it proves useful for you! I anticipated a need for this, so that motivated me to take a closer look. I’m glad you brought attention to the issue.