Dash 引导组件填充

Question

我一直在尝试将构建多页应用程序示例 https://dash.plotly.com/urls 与 Dash 引导组件简单侧边栏示例：https://dash-bootstrap-components.opensource.faculty.ai/examples/simple-sidebar/page-1 结合起来。它在第一次加载时工作并正确显示，但是每次我从一个页面导航到另一个页面时，主 div 被推得越来越远，相对填充似乎随着每个页面的变化而增加。我该如何避免这种情况？

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import dash
from app import app





# 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",
}

sidebar = html.Div(
    [

        dbc.Nav(
            [
                dbc.NavLink("Home", href="/", active="exact"),
                dbc.NavLink("Page 1", href="/apps/app1", active="exact"),
                dbc.NavLink("Page 2", href="/apps/app2", active="exact"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)
        
content = html.Div(id="page-content",
                   
                   style=CONTENT_STYLE,
                   children = (html.P("I am the main div")
                   
                   ))    
        
layout = html.Div([
    sidebar,
    content

])

Answer 1

我设法找到了解决方案。该应用程序遵循 Plotly 示例中的结构。我已经包含了 app.py 和 app1.py，这应该是重新创建问题所需的全部内容。问题来自这样一个事实，即 app1.py 中 ID 为“page-content”的 DIV 嵌套在 index.py 中 ID 为“page-content”的 DIV 中。重命名外部 DIV 解决了这个问题。

• app.py
• index.py
• 应用程序 |-- 初始化.py |-- app1.py |-- app2.py

app1.py '''

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
import dash
import dash_bootstrap_components as dbc



# 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",
}
sidebar = html.Div(
    [

        dbc.Nav(
            [
                dbc.NavLink("Home", href="/", active="exact"),
                dbc.NavLink("Page 1", href="/apps/app1", active="exact"),
                dbc.NavLink("Page 2", href="/apps/app2", active="exact"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content",
                   
                   style=CONTENT_STYLE,
                   children = (html.P("I am the main div")
                   
                   ))    
        
layout = html.Div([
    sidebar,
    content

])


@app.callback(
    Output('app-1-display-value', 'children'),
    Input('app-1-dropdown', 'value'))
def display_value(value):
    return 'You have selected "{}"'.format(value)

index.py '''

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
from apps import app1, app2


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True)

app.py '''

import dash
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, suppress_callback_exceptions=True,external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server