我想在Dash应用的侧边栏面板上添加一个滚动条,参考这个应用程序。当内容超出页面时,我可以使滚动条动态显示,但我似乎只能通过设置CSS样式"position": "fixed"
来让主页面div显示在侧边栏div右侧。然而,即使有滚动条可用,该设置仍将内容固定在原位。
以下是代码:
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
"display": "inline-block"
}
sidebar = html.Div(
[
html.H2("Sidebar", className="display-4"),
html.Hr(),
html.P(
"A simple sidebar", className="lead"
),
],
style=SIDEBAR_STYLE,
)
maindiv = html.Div(
id="first-div",
children=[
# first row
html.Div([
html.H2("First Row"),
html.Hr(),
html.P(
"First row stuff", className="lead"
)
]),
# second row
html.Div([
html.H2("Second Row"),
html.Hr(),
html.P(
"Second row stuff", className="lead"
)
])
],
style=CONTENT_STYLE
)
app.layout = html.Div([sidebar, maindiv])
if __name__ == "__main__":
app.run_server(port=8888)