Dash: Keep Tabs bar on top and remember where was scrolled between tabs

user_4815601 0
Viewed 375

I have two things I want to accomplish in below example of Dash application.

  1. Keep the Tabs bar "frozen" on the top of application, so If someone scrolled down to e.g. 500 row can easily select other tab without scrolling "up"
  2. If 1 achieved. "Remember" at which Row user scrolled down so when changing between tabs it's still on the same Row of application.

Simplified app:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

# App
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.FLATLY],
                title='TestCards')
server = app.server


# Layout
text = [[f'Row_{i}', html.Br()] for i in range(1000)]
text = [item for sublist in text for item in sublist]

tab1_content = html.Div([html.H1(f'Title Tab1'),
                         html.P(text)])

tab1 = dbc.Card(dbc.CardBody([tab1_content]))

tab2_content = html.Div([html.H1(f'Title Tab2'),
                         html.P(text)])

tab2 = dbc.Card(dbc.CardBody([tab2_content]))

app.layout = html.Div([dbc.Tabs(
    [dbc.Tab(tab1, label='Tab1'),
     dbc.Tab(tab2, label='Tab2')])])

# Run App
app.run_server(host='0.0.0.0', debug=False)

What it looks like when loaded and scrolled down:
enter image description here

What I would like to achieve:
enter image description here

plotly-dash python
1 Answers

Give an id to your Tabs component, for example:

dbc.Tabs(
    [dbc.Tab(tab1, label='Tab1'),
     dbc.Tab(tab2, label='Tab2')], id="my-tabs")

Then add this css in your app:

#my-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
}
user_137227580
Related