Horizontal Scroll On Page Load

Panto9 · 2024-08-30T08:10:47.655Z

Hello, I hace a repeatgroup list of tab items that scroll sideways when the screen width is smaller than the group’s width. However, on page load, the tab cells furthest right are hidden (which is normal I guess). What I need is a way to scroll to an active tab on page load. Right now bubble can only scroll top-to-bottom and I can’t seem to find any plugin that scrolls an element sideways automatically.

Its like this:

Screenshot 2024-08-30 0906351738×264 183 KB

It displays normally if I have not refreshed the page, and navigate on another tab (in mobile):
Screenshot 2024-08-30 090711

Now when I refresh the page, it looks like this:
Screenshot 2024-08-30 090727

Which imo, is a small but essential thing to improve experience. I basically want it to look like the 2nd picture on every load instead of the user having to manually scroll again. It may be trivial but I need to add it.

build.marshall · 2024-08-30T08:19:13.797Z

Adding conditional expressions for page width could allow you to resize elements, text, or even use icons instead of labels when the page is reduced to a certain size.

Hopefully that’s the right interpretation of the issue you’re facing.

What you can also do is switch to the ‘responsive’ tab above the elements tree, and that way you’ll be able to change page width while you’re working to see how the conditionals are working.

Do you have any conditional expressions set up for page width at the moment?

Panto9 · 2024-08-30T08:45:53.694Z

Thanks for the reply.

But what I want to do has nothing to do with responsiveness. So basically the tabs scroll sideways on tablet and mobile view.
However if say (still on mobile or tablet view), I’m on the last tab “services” (see image 2) and I refresh the page, the RG defaults to the way image 3 displays, and the user has to scroll the tab list sideways again to get to the services tab.
I do not want that behaviour. I want it to automatically scroll to the active tab, essentially making the active tab the first tab from the left, or from the right depending on it’s position.

I know it’s not a very common feature but it’s something I wish to add as a small UX improvement.

build.marshall · 2024-08-30T11:42:33.760Z

How are you activating the tab currently? Is it with a workflow / custom state?

boston85719 · 2024-08-30T11:43:15.187Z

Panto9:

has nothing to do with responsiveness

In a way it does since its an issue of desktop versus mobile or tablet view

Panto9:

Right now bubble can only scroll top-to-bottom

This is not the case as far as I can tell from testing in my app…if I have a repeating group set to fixed number of rows of 1 and I use the action ‘scroll to entry in repeating group’ the repeating group gets scrolled horizontally to the entry I specified.

What you need to do is setup a lot of conditions with page widths to determine if the selected value is within view or not based on the width of the screen…you can also incorporate a ‘in view’ plugin or other type of setup (I believe some use JS to Bubble for this) in order to determine if the selected entry is in view and if not to scroll to it.

Panto9 · 2024-08-30T12:00:41.691Z

boston85719:

In a way it does since its an issue of desktop versus mobile or tablet view

No it doesn’t. It’s an interactivity issue not a responsiveness issue. The repeat group is working as expected, I only need an added functionality that trigger on certain conditions and only in tablet and mobile view (maybe that iswhy you think it is a responsiveness issue).

Just like the “scroll to” action in Bubble’s workflow (this one just scrolls up and down), I need an action/plugin/anything that I can apply on page load and when other conditions are met to “scroll to” the active tab. In this case it’ll be scrolling an element and not the page itself.

Panto9 · 2024-08-30T12:03:33.826Z

boston85719:

This is not the case as far as I can tell from testing in my app

You misunderstand. What I mean is Bubble’s “scroll to” action in the workflows section only scrolls top to bottom, and it only scrolls the page. What I need is to scroll automatically, a repeat group, and to do so from left to right or right to left.
I can manually scroll, that is not the issue here (as I already stated prior that manually scrolling is working but not my issue)

Panto9 · 2024-08-30T12:06:10.324Z

boston85719:

you can also incorporate a ‘in view’ plugin or other type of setup (I believe some use JS to Bubble for this)

Alas this is the roadblock. I’m pants at JS and was looking for a plugin that actually does this. Everything is setup except the scrolling part.

Anyways, thank for your input. I appreciate.

boston85719 · 2024-08-30T12:14:06.100Z

Panto9:

You misunderstand. What I mean is Bubble’s “scroll to” action in the workflows section only scrolls top to bottom, and it only scrolls the page. What I need is to scroll automatically, a repeat group, and to do so from left to right or right to left.
I can manually scroll, that is not the issue here (as I already stated prior that manually scrolling is working but not my issue)

You misunderstand. The bubble action for scroll to entry in a repeating group works when the repeating group has one row and multiple columns, which means it scrolls horizontally. You do not want to scroll the page, you want to scroll the repeating group.

Panto9:

What I need is to scroll automatically

Setup the conditional triggers based on selected RG entry being in view or not…as mentioned various approaches to get there.

Panto9:

Alas this is the roadblock. I’m pants at JS and was looking for a plugin that actually does this.

There is a plugin, called elements in view…there are also forum posts from what I recall showcasing how to do it with JS to Bubble elements.

system · 2024-11-08T08:11:37.253Z

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