Tabs autoscroll when 'id' is passed to a Graph

Dash Python
1

Hello everyone,

Consider the following simplistic example of a problem I am encountering with my app:

from dash import Dash, dcc, html
from more_itertools import intersperse

header = html.P(list(intersperse(html.Br(), ['Header'] * 50)))
fig = {'data': [{'x': [1,2,3], 'y': [1,2,3], 'type': 'scatter', 'name': 'SF'}]}
make_graph = lambda id: dcc.Graph(id=id, figure=fig)

app = Dash(__name__)
app.layout = html.Div([
    header,
    dcc.Tabs([dcc.Tab(make_graph('1')),dcc.Tab(make_graph('2')),dcc.Tab(make_graph('3'))])
])

app.run(debug=True)

When I select a tab from the dcc.Tabs, the page would automatically scroll to the top if I have given ids to the dcc.Graphs. If they don’t have ids, the page stays where it is. How can I avoid that? I want my graphs to have ids and prevent the scrolling.

Thank you :slight_smile:

2

Welcome to the forums @Ivaylo_Rusinov.

I am not sure, if I understand the described problem. Does the example replicate what you are experiencing?

3

Thanks for the reply!

I get this when I run the code provided in my question:
ids
When I only remove the ids from the graphs, i.e. change the 5th line of the code to this:
make_graph = lambda id: dcc.Graph(figure=fig)
I get this:
no_ids
How can I prevent the automatic scrolling when selecting a Tab while still let the graphs have ids? If you would know what causes this in the first place, that would also be very appreciated :slight_smile:

4

Hey @Ivaylo_Rusinov this seems to be related to the browser you are using. I can reproduce this using Firefox but not using Chrome or Edge. Not sure if there is something you might configure within dash or Firefox though.

5

Hi @AIMPED. Thank you for looking into this! Are you sure it works with Chrome? For some reason I get exactly the same behavior..
Screencastfrom12-06-25094417-ezgif.com-video-to-gif-converter
It might be a problem on my side, I don’t know how this would not be a common issue otherwise.

6

Hello @Ivaylo_Rusinov,

What version of Dash are you using?

7

Hi @jinnyzor. Indeed, when I updated Dash to the most recent version (3.0.4), I stopped seeing the problem with Chrome.

8

This is more than likely a side effect of the rerendering of dash prior to 3.