Forum Academy Marketplace Showcase Pricing Features

WF Scroll to an element within a scrollable group

Need help Responsiveness
#1

Hey everyone! I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.

I tried the “scroll to element” wf action, but it doesn’t work since this references full page height, has anyone been able to achieve this?

Best to all

#2

There’s a seperate scroll action for repeating groups.

#3

It’s not an RG, since the new responsive engine you can allow the element to fit the content or have a max screen height and allow it to scroll, that “group scroll” is what I’m trying to achieve.

#4

Ah okay sorry I misunderstood. You would be better off running Javascript for this using the Toolbox plugin.

I myself have had issues with Bubble’s native scroll to action.

#5

I’ll give it a try, but wanted to avoid using plugins for this… Thanks!!

#6

As far as I know this is not possible, because the bubble “scroll to” and “scroll position” etc. only interacts with the scroll of the main page that’s loaded and not with any other scroll from an scrollable (Floating)group on that page.

I fixed it with javascript that linked to the id of the (Floating) group.

#7

I have asked ChatGPT if he knows how, and I got a answer. I didn’t try it but maybe it works.

Question:

I have a question about bubble.io I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.

I tried the “scroll to element” workflow action, but it doesn’t work since this references full page height? Do you know how to achieve this?

Chatgpt answer:

To scroll to a specific element within a group that allows vertical scrolling, you can use the “Scroll to element” action in combination with the “Find element by ID” action. Here’s an example of how you can do this:

First, give the element that you want to scroll to a unique ID by setting the “ID” attribute of the element in the Element Properties panel.

Next, add a “Scroll to element” action to your workflow and select the group that allows vertical scrolling as the element to scroll.

Add a “Find element by ID” action before the “Scroll to element” action and set the ID of the element that you want to scroll to as the value for the “ID” input field. This will find the element that you want to scroll to within the group.

Connect the output of the “Find element by ID” action to the “Element” input field of the “Scroll to element” action. This will tell the “Scroll to element” action to scroll to the element that was found by the “Find element by ID” action.

Add a trigger for the workflow, such as a button click, to execute the actions.

This should allow you to scroll to a specific element within a group that allows vertical scrolling when the trigger is activated.

#8

Hi @jos2 I got really excited with the ChatGPT answer, but now there is no “Find element by ID” in the native actions in bubble. Did a quick search in the forum and couldn’t find any plugins that provide this action. :frowning:

Thanks a ton!

#9

I’m having the exact same problem right now. Even tried making it a reusable element and keeping the “scroll-to” workflow in there, but still no dice.

Did it work with JavaScript code? And if so, which code did you use?

#10

Hi @wesfrank in the end I opted to create a hidden group under the scrollable group and show it upon clicking a button, It solved my problem but didn’t find a solution for the underlying issue.

#11

also looking solution for the same problem, but didn’t find anything in forum or any plugin to solve this issue

#12

Ran into the same problem.

Luckily I have an RG on the page, so my workaround is to use this RG as an anker and use the WF “scroll to entry of RG” to achieve the “scroll to element” result.

The distance b/t the 1st item of this RG and the real destination element I want the page to scroll is the offset number.

Workarounds are never ideal but hopefully this helps others who run into the same issue.

#13

Would you mind to share your js script?

#14

I used this very basic script.

var divElement = document.getElementById("id-of-the-element");
divElement.scroll({
top: 0
});

In the workflow you need to run this script, but you need to run is when the element with the id “id-of-the-element” is visible, otherwise you will get an error.

1 Like
#15

Hey man it works! Thanks a lot!

1 Like
#16

if you even want a better experience and you have a little bit of code knowledge than you can create a plug from Smooth Scrollbar i created one and then you have smooth scrolling :slight_smile: that’s really awesome

#17

I solved the problem:

I had a group inside a group and I wanted the content inside the inner group to be scrolled so that the most bottom item is always shown.

This is what I did (with help from GPT4):

  1. Add the Toolbox plugin to your app. You can do this by going to the “Plugins” tab in your app’s settings and clicking the “+ Add plugins” button. Then, search for “Toolbox” and click “Install”.
  2. Add an ID attribute to your group. You can do this in the Bubble editor by selecting your group and scrolling down to the “ID Attribute” field in the “Element Properties” panel on the left. You’ll need to check the box that says “Expose the option to add an ID attribute to HTML elements” in the “Settings” > “General” tab before you can add an ID.
  3. Create a new workflow for your button. When your button is clicked, you want it to run some JavaScript code to scroll to your group.
  4. Add the “Run JavaScript” action to your workflow. You can find this action under the “Plugins” category in the workflow action selection dropdown.
  5. Write the JavaScript code to scroll to your group. I added the id: “out_group” to the outer group and the id: “scroll_item” to the element that is always at the bottom.
  6. I added this javascript code:
    // Get the parent element
    var parentElement = document.getElementById(“out_group”);

// Get the specific child element within the parent
var specificChildElement = document.getElementById(“scroll_item”);

// Scroll the specific child element into view
specificChildElement.scrollIntoView();