I’m learning Dash.
I have a page that’s using CSS to create a sidebar, and a navbar. I have a separate CSS class to hold the page contents (each page fits to the right of the sidebar, and below the navbar.
It works pretty good, however when I scroll down on the page itself - some of the components on the page are hidden as the slide under the navbar, but other items appear on top of the navbar (see images.)
I can’t see any difference between the declarations of the components that are going under versus over.
app.py
app = Dash(__name__, use_pages=True)
app.title="Main Sidebar"
def navbar():
return html.Div([
html.P("LC/MS Data Exploration",
style = {"position":"fixed", "bottom":"85%",
"left":"40%",
"font-size":"64px"}),
dcc.Link("Home", href="/home",
style = {"position":"fixed", "bottom":"85%", "left":"10%",
"font-size":"32px", "color":"White", "text-decoration":"None"
}),
dcc.Link("Unknown Peaks", href="/UnknownPeaksDashboard",
style = {"position":"fixed", "bottom":"85%", "left":"20%",
"font-size":"32px", "color":"White", "text-decoration":"None"
}),
dcc.Store(id='resultset_names', storage_type='session'),
dcc.Store(id='resultset_ids', storage_type='session'),
dcc.Store(id="connection", storage_type='session'),
dcc.Input(id = "connection-host", type = "text", value = "WIN-PJ3JNCTE9C8.lfs.agilent.com", placeholder = "Host", debounce = True,
style = {"position":"fixed", "bottom":"97%", "left":"85%", "width":"17rem"}),
dcc.Input(id = "connection-port", type = "text", value = "5433", placeholder = "Port", debounce = True,
style = {"position":"fixed", "bottom":"95%", "left":"85%", "width":"17rem" }),
dcc.Input(id = "connection-dbname", type = "text", value = "datarepo", placeholder = "Database", debounce = True,
style = {"position":"fixed", "bottom":"93%", "left":"85%", "width":"17rem" }),
dcc.Input(id = "connection-user", type = "text", value = "postgres", placeholder = "User", debounce = True,
style = {"position":"fixed", "bottom":"91%", "left":"85%", "width":"17rem" }),
dcc.Input(id = "connection-password", type = "password", value = "postgres", placeholder = "Password", debounce = True,
style = {"position":"fixed", "bottom":"89%", "left":"85%", "width":"17rem" }),
html.Button('Connect', id='submit-connection-info', n_clicks=0,
style = {"position":"fixed", "bottom":"87%", "left":"85%"}),
], className = "navbar")
def sidebar():
return html.Div([
html.Div([
dcc.Location(id="url"),
html.Div([
html.Div("Filter by date range"),
html.Div(id = "sidebar-date-picker-range"),
html.Hr(),
# Multiselect generated in callback so it updates on changes to connection
html.Div("Filter resultset names"),
dcc.Input(id = "resultset-name-filter",
type = "text",
value = "", # Use this value after demo
placeholder = "REGEX search string",
debounce = True,
),
html.P(""),
html.Div(id = "resultset-name-multiselect"),
html.Div(id = 'message-below-resultset-multiselect'),
],
className = "sidebar", # Css formatting saved in variable above
),
]),
dash.page_container
])
app.layout = html.Div([
navbar(),
sidebar(),
])
app.scripts.config.serve_locally = True
if __name__ == '__main__':
app.run_server(debug=True)
page
layout = html.Div([
html.H1(children='Unknown peaks dashboard'),
html.H3(children='''Dashboard with charts representing the relationship of 'Unknown' peaks (peaks that were found, but not defined as expected in a method.)'''),
dmc.Checkbox(id="update-df-on-change",
label="Always update data from SQL server on every filter change (will slow the page down)",
size="md",
checked=False),
html.P(""),
html.Hr(),
html.H2("Distribution of Unknown Peaks..."),
dcc.Loading(
id="loading-unknowns-heatmap",
children=[html.Div([html.Div(id="loading-unknowns-heatmap-output")])],
type="circle",
),
##########################################################
# Full width for heat map
html.Div(id = 'special-message-above-unknowns-heatmap'),
dcc.RadioItems(
["sum", "count", "avg", "min", "max"],
'sum',
id='unknowns-heatmap-bullets',
inline=True,
),
html.Div([
html.Div(id = "unknowns-heatmap-vertical-range-slider")
], style={'width': '10%', 'display': 'inline-block'}, className="row"),
html.Div([
dcc.Graph(id='unknowns-heatmap'),
], style={'width': '90%', 'display': 'inline-block', "maxHeight": "400px", "overflow": "scroll"}),
html.Div([
html.P("Use slider to adjust bin size (Data points per minute of retention time.) Current selection:")
], style={'width': '45%', 'display': 'inline-block'}, className="row"),
html.Div([
html.Div(id = "unknowns-heatmap-slider-output")
], style={'width': '35%', 'display': 'inline-block'}, className="row"),
html.Div([
dcc.Slider(1, 100, 1,
value=1,
id='unknowns-heatmap-slider',
marks= {i:f"{i}" for i in range(0,100,5)},
),
]),
html.P(""),
html.Hr(),
(...snip...)
],
className = "chartPages",
)
style.css
.sidebar {
position: fixed;
overflow: scroll;
top: 10rem;
left: 0;
bottom: 0;
width: 20rem;
padding: 2rem 1rem;
background-color: #f8f9fa;
}
.navbar {
position: fixed;
top: 0;
left: 0;
bottom:85%;
width: 100%;
padding: 2rem 1rem;
background-color: #0085D5;
background-image: url(https://www.redacted.com//logo-white-white-2x.png);
background-position: 2% 15%;;
background-repeat: no-repeat;
color: white;
}
.chartPages {
margin-top: 7rem;
margin-left: 22rem;
margin-right: 2rem;
padding: 2rem 1rem;
}
Page at first load (OK)
|
|
|
Start scrolling down on page
