Dash bootstrap components padding

Question

I've been trying to combine the Structuring a Multi-Page App example https://dash.plotly.com/urls with the Dash bootstrap components simple side bar example: https://dash-bootstrap-components.opensource.faculty.ai/examples/simple-sidebar/page-1 . It works and displays correctly the first time it loads, however each time I navigate from page to page the main div is pushed further and further to the right, the relative padding is seemingly incremented with each page change. How do I avoid this?

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

I managed to find the solution. The app followed the structure from the Plotly example. I've included app.py and app1.py, this should be all that is needed to recreate the issue. The problem came from the fact that a DIV with ID "page-content" from app1.py is nested inside a DIV with ID "page-content" in index.py. Renaming the outer DIV resolved the problem.

• app.py
• index.py
• apps |-- init.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