Scroll jump in MS Edge when clicking Tab

Dash Python
1

Hey,

I’m currently building a dashboard that also needs to run on MS Edge. I noticed that when I click on a Tab from dash, the scroll bar jumps to the top.
This behavior is not happening with chrome.

Is there anything I can do, to prevent this?

1 Like
2

Does this happen for you in the documentation for tabs? https://dash.plotly.com/dash-core-components/tabs. If so, then that sounds like a bug. If not, then there is something else going on within the tabs (a simple, reproducible example would help! see How to Get your Questions Answered on the Plotly Forum) or you are on an older version of Dash.

3

Sure, this is a example to reproduce it.
I noticed it only happening when there is actually “content” in the tab.

Here the example to reproduce,

import dash
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(
    __name__
    # server=server,
)


app.css.config.serve_locally = True
app.scripts.config.serve_locally = True


app.layout = html.Div(
    children=[
        html.Div(
            children="DASd",
            style={'height': '1000px'}
        ),
        dcc.Tabs(
            id='tabs',
            value='tab-1',
            children=[
                dcc.Tab(
                    label="Tab-1",
                    value='tab-1',
                    children=[
                        dcc.Graph(
                            figure={
                                'data': [
                                    {'x': [1, 2, 3], 'y': [1, 4, 1],
                                        'type': 'bar', 'name': 'SF'},
                                    {'x': [1, 2, 3], 'y': [1, 2, 3],
                                    'type': 'bar', 'name': u'Montréal'},
                                ]
                            }
                        )
                    ]
                ),
                dcc.Tab(
                    label='Tab-2',
                    value='tab-2',
                    children=[
                        dcc.Graph(
                            figure={
                                'data': [
                                    {'x': [1, 2, 3], 'y': [1, 4, 1],
                                        'type': 'bar', 'name': 'SF'},
                                    {'x': [1, 2, 3], 'y': [1, 2, 3],
                                    'type': 'bar', 'name': u'Montréal'},
                                ]
                            }
                        )
                    ]
                )
            ]
        )
    ]
)


if __name__ == "__main__":
    app.run_server(
        host='0.0.0.0',
        debug=False,
        port=8081
    )

Configuration I’m using:

dash 1.12.0
dash-core-components 1.10.0
dash-html-components 1.0.3
dash-renderer 1.4.1
dash-table 4.7.0

Microsoft Edge 44.17763.831.0

Hope this helps.

1 Like