Tabbed Container setting scroll view to mid-page instead of top

💬 App Building
1

1. My goal: Control the scrolling point when moving between tabs inside a tabbed container.
2. Issue: I have an app with 3 tabs in a tabbed container. Every time I move between tabs, the scrolling point is set to mid-page, instead of the top. This leads to a strange user experience, as the user starts in the middle of the page.
3. Steps I've taken to troubleshoot: I have tried setting the scrolling point to the top through events and JS code, but this feels like a patch that doesn't address the underlying issue.

2 Likes
4

  1. Every time you switch tabs, set the scroll position to the top of the container.

  2. In Retool, you can do this using a JavaScript snippet on the tab switch event:

    js

    Added a change event handler to tabbedContainer1 that executes window.scrollTo({ top: 0, behavior: 'auto' })

    (Replace .tabbed-container-class with your actual tab container’s class or ID.)

  3. If Retool has a built-in event for "on tab change," use that to run your scroll-to-top code automatically.

  4. If possible, report the issue to

    Retool so they might fix it in future versions.

    Screen Recording 2025-11-21 105143.mp4

    In this video, I explain how to solve the tabbed container scroll issue in Retool with a practical example. First, I show what happens when switching between tabs—the scroll position lands in the middle of the page, which can be confusing for users.

5

+1
I have this same issue but with a regular (non-tabbed) container…

1 Like
6

Hi @Miguel_Cacho_Soblechero,

I just tested out the scrolling for a tabbed container and don't see the behavior you mentioned where the scroll is being set to the middle of the container.

Is your Layout Display set to Grid or Stack? With mine set to Stack and the Direction set to vertical, changing the tabs set each container to the top.

Do you have Spacing Height set to Auto or Fixed? When I tried to use Auto, the component would expand to fit it's child content and removed the scroll functionality, with Fixed I was able to get the scroll to appear.

Let me know if I am missing any steps to replicate!

7

Hi @Miguel_Cacho_Soblechero,

Just wanted to check in to see if you had details about your Layout display and Spacing Height?

Were you able to reproduce the behavior in the loom video I shared, or have a Loom video of the behavior you are seeing with the component set up?