Auto scrolling on Table Element

Need help Responsiveness
1

Hi, I am having trouble auto scrolling using the Table Element.

In my scenario a user will populate data entries which then appear in a table. As more entries are submitted the table will reach its max height and vertical scrolling will become available.
As the latest entries are the most important I want the focus of the table to always be on the last element.

Is there a way to auto focus/auto scroll to the last element in the table?

2

Hi @Dibbsie

You can use JavaScript.

  1. Add an HTML element to your page for the script.
  2. Insert the following JavaScript in the HTML element:
<script>
function scrollToBottom() {
  var table = document.querySelector(".your-table-class");
  if (table) {
    table.scrollTop = table.scrollHeight;
  }
}
</script>

Replace .your-table-class with the actual class or ID of your table.

  1. Trigger the function using a workflows. For example, you can use the “Run JavaScript” action from the Toolbox plugin after the data entry.
<script>
scrollToBottom();
</script>
1 Like
3

Hi @llloyd
Thanks for the response, I am new to bubble and haven’t yet played with HTML elements or javascript.

I followed the instructions you provided as best I could but nothing is happening that I can determine.

A couple of questions:

  1. Does the HTML element need to be visible and/or anywhere particularly on the page?
  2. Is the “.your-table-class” the same as table name?
    If not how do I determine the class or ID of the table?

Also if you can recommend any good tutorials that explain this I am happy to view them.

Thanks

4

Ok I have played around a lot more and figured a few things out.

  1. I had to enable ID Attributes in the general settings
  2. added a unique ID for my table to reference
  3. I had to swap from document.querySelector(“table-id”);
    to document.getElementById(“table-id”);

Now the issue i have is that when the user triggers the workflow to call the javascript function the scroll does not go all the way down. It will sit one table row element off the bottom.
I tried to manually add height to the scroll top table.scrollTop = table.scrollHeight+200;
But this didn’t work.

What am i missing from the logic here?

5

@Dibbsie okay great, I’m glad you’re making progress.

So try adding a delay. This is a quick thing you can try and will see quickly if it works or not. By adding a small delay before attempting to scroll this ensures all new rows are fully rendered before the scroll action is executed.

  1. Adding Delay: The setTimeout function introduces a slight delay, ensuring that the new row is fully rendered before scrolling.
  2. Scrolling Action: After the delay, the table is scrolled to the bottom by setting table.scrollTop to table.scrollHeight.
<script>
function scrollToBottom() {
  var table = document.querySelector(".your-table-class");
  if (table) {
    setTimeout(function() {
      table.scrollTop = table.scrollHeight;
    }, 100); // Adjust the timeout as needed
  }
}
</script>

Hopefully this helps.

This person has a similar issue, not sure if the solution with help you.
Table Element “scroll to” functionality - Need help - Bubble Forum

6

Thanks @llloyd
I think that has done the trick.
Occasionally the delay doesn’t work in testing but mostly its fine.
I will tweak the timeout more down the track.

It has led me to a different issue posted here: Tables with different data sources

Any help with that would be appreciated.

1 Like