Dash 引導組件填充

Question

我一直在嘗試將構建多頁應用程序示例https://dash.plotly.com/urls與 Dash bootstrap 組件簡單的側邊欄示例相結合： Z5E056C500A1C4B6A7110BADE -bootstrap-components7110BADE50D807 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 解決了這個問題。

• 應用程序.py
• 索引.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)

索引.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)

應用程序.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