Collapsable Sidebar. Layout with embedded dcc.Graph not returning to original size when sidebar expands

Dash Python
1

Hi Community, hi Adam!
This is my first post but I´ve been pretty active with Dash and plotly, thanks for the great explanations Adam !

I followed Building Dashboard using Dash — Responsive Navbar Part — 2 | by Abhinav Kumar | Medium and got the awesome Navbar, collapsing and expanding whenever there is only html in my layout. But not expanding again when there is a dcc.Graph component. I checked Dynamic layout does not propagate resized graph dimensions until window is resized - #6 by David22 but it doesn’t work and I assume the dcc.Graph is somehow overruling the sidebar’s willingness to shrink the layout. Does anybody know how to make the dcc.Graph really “fluid”?

layout = dbc.Container(
    fluid=True,
    children=[
        dbc.Row(
            dbc.Col(
                [
                    dcc.Graph(figure=RV),
                ],
            ),
        ),
        dbc.Row(
            dbc.Col(
                [
                    dcc.Graph(figure=fig),
                ],
            ),
        ),
        dbc.Row(
            dbc.Col(
                [
                    dcc.Graph(figure=bar_LTV_GES),
                ],
            ),
        ),
        dbc.Row(
            dbc.Col(
                [
                    dcc.Graph(figure=bar_LTV_NEU),
                ],
            ),
        ),
    ],
)
2

Hello @Mmmwhy,

Welcome to the community!

Could you give a little bit more background please?

What versions of dmc and dash are you running? Could you provide your layout?

3

For sure! I have a multi-page app.

This is my home.py where everything works fine and the layout (pure text) collapses and expands. It is very short.

imports…

register_page(__name__,path="/",icon="ph:squares-four-duotone")
layout = html.Div(html.H3(" TEST; IT DOES COLLAPSE WITH A LONG TEXT; SO THE PROBLEM IS IN THE LAYOUT OF THE .py CHAPTERS")

)

The layout I posted before is in the chapter of the page that wont let the sidebar expand. The figures are simple plotly ones, such as:

RV = go.Figure()

RV.add_traces(
    go.Waterfall(
    #textposition="outside"

The app.py file with the Navbar is built almost one to one as described in the Medium link.

import dash
from dash import Output, Input, State, html, ClientsideFunction
from dash_iconify import DashIconify

from dash import html, Output, Input, State
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

app = dash.Dash(__name__,use_pages=True, #external_stylesheets=[dbc.themes.BOOTSTRAP]
                )

def get_icon(icon):
    return DashIconify(icon=icon, height=16, color="#c2c7d0")
def create_nav_link(label, href):
    return dmc.NavLink(
        label=label,
        href=href,
        style={'display': 'inline-block'},
    )
    
    
app.layout = dmc.MantineProvider(
    theme={
        "fontFamily": '"Inter", sans-serif',
        "components": {
            "NavLink": {"styles": {"label": {"color": "#c2c7d0"}}}
        },
    },
    children=[
        dmc.Container(
            [
                dmc.Navbar(
                    p="md",
                    fixed=False,
                    width={"base": 300},
                    hidden=True,
                    hiddenBreakpoint="md",
                    position="right",
                    height="100vh",
                    id="sidebar",
                    children=[
                        html.Div(
                            [
                            dmc.NavLink(
                                label="HOME",
                                icon=get_icon(icon="tabler:settings-2bi:house-door-fill"),
                                href="/",
                            ),
                            dmc.NavLink(
                                label="kkk",
                                icon=get_icon(icon="tabler:fingerprint"),
                                childrenOffset=28,
                                opened=False,
                                children=[
                                    dmc.NavLink(label="P"),
                                    dmc.NavLink(label="A"),
                                    dmc.NavLink(label="V"),
                                ],
                            ),
                            dmc.NavLink(
                                label="Gggg",
                                icon=get_icon(icon="tabler:fingerprint"),
                                childrenOffset=28,
                                opened=False,
                                children=[
                                    dmc.NavLink(label="P"),
                                    dmc.NavLink(label="A"),
                                    dmc.NavLink(label="V"),
                                ],
                            ),
                            dmc.NavLink(
                                label="NOT WORKING",
                                icon=get_icon(icon="bi:house-door-fill"),
                                childrenOffset=28,
                                opened=False,
                                children=[
                                    create_nav_link(
                                        label=page["name"], href=page["path"]
                                    )
                                    for page in dash.page_registry.values()
                                    if page["path"].startswith("/chapter3")
                                ],
                            ),
                            dmc.NavLink(
                                label="KKsdang",
                                icon=get_icon(icon="tabler:fingerprint"),
                                childrenOffset=28,
                                opened=False,
                                children=[
                                    dmc.NavLink(label="P"),
                                    dmc.NavLink(label="A"),
                                    dmc.NavLink(label="V"),
                                ],
                            ),
                            ],
                            style={"white-space": "nowrap"},
                        )
                    ],
                    style={
                        "overflow": "hidden",
                        "transition": "width 0.3s ease-in-out",
                        "background-color": "#343a40",
                    },
                ),
                dmc.Drawer(
                    title="Company Name",
                    id="drawer-simple",
                    padding="md",
                    zIndex=10000,
                    size=300,
                    overlayOpacity=0.1,
                    children=[
                        ], style={'background-color':''}, styles={'drawer':{'background-color':'#343a40'}}),
                dmc.Container(
                    [
                        dmc.Header(
                            height=60,
                            children=[
                                dmc.Group(
                                    [
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="sidebar-button",
                                                )
                                            ],
                                            smallerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="drawer-demo-button",
                                                )
                                            ],
                                            largerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.Text("Company Name"),
                                    ]
                                )
                            ],
                            p="10px",
                            style={"backgroundColor": "#fff"},
                        ),
                        html.P(dbc.Container(dash.page_container,
                   fluid=True)),
                    ],
                    id="page-container",
                    p=0,
                    fluid=True,
                    style={
                        "background-color": "#f4f6f9",
                        "width": "100%",
                        "margin": "0",
                    },
                ),
            ],
            size="100%",
            p=0,
            m=0,
            style={"display": "flex"},
        ),
        html.Div()],
)


@app.callback(
    Output("sidebar", "width"),
    Input("sidebar-button", "n_clicks"),
    State("sidebar", "width"),
    prevent_initial_call=True,
)
def drawer_demo(opened, width):
    if opened:
        if width["base"] == 300:
            return {"base": 70}
        else:
            return {"base": 300}
    else:
        raise dash.exceptions.PreventUpdate


@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_dem(n_clicks):
    return True


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

I placed the dcc.Graphs in the home.py and the sidebar also stopped expanding there (before it worked with the aforementioned text), so I assume the issue has nothing to do with the way the links and pages are structued but purely with the dcc.Graph

4

If possible, could you provide a working example? This one is clipped off. XD

5

Should i share a zip or how can we do that?

6

You should be able to add more to the code above, I am missing the part about how the container is designed.

My guess is that somehow the navbar is always taking up the space, or the right side where you graph is always the same size.

7

Thanks, I added code in the upper post to the full file.

This “notworking.py” is a chapter in one of my “pages” folder, which are accessed via “create_nav_link” functions

#notworking
from networkx import dfs_edges
from dash import dcc, html, register_page
import plotly.express as px
import dash_bootstrap_components as dbc
import plotly.express as px



register_page(__name__, icon="mdi:chart-histogram")


data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')

layout = dbc.Container(
    fluid=True,
    children=[
        dbc.Row(
            dbc.Col(
                [
                    dcc.Graph(figure=fig),
                ],
            ),
        ),
    ],
)
8

Hmm…

Running this directly works:

import dash
from dash_iconify import DashIconify

from dash import html, Output, Input, State, dcc
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

import plotly.express as px

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]
                )


def get_icon(icon):
    return DashIconify(icon=icon, height=16, color="#c2c7d0")


def create_nav_link(label, href):
    return dmc.NavLink(
        label=label,
        href=href,
        style={'display': 'inline-block'},
    )

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')


app.layout = dmc.MantineProvider(
    theme={
        "fontFamily": '"Inter", sans-serif',
        "components": {
            "NavLink": {"styles": {"label": {"color": "#c2c7d0"}}}
        },
    },
    children=[
        dmc.Container(
            [
                dmc.Navbar(
                    p="md",
                    fixed=False,
                    width={"base": 300},
                    hidden=True,
                    hiddenBreakpoint="md",
                    position="right",
                    height="100vh",
                    id="sidebar",
                    children=[
                        html.Div(
                            [
                                dmc.NavLink(
                                    label="HOME",
                                    icon=get_icon(icon="tabler:settings-2bi:house-door-fill"),
                                    href="/",
                                ),
                                dmc.NavLink(
                                    label="kkk",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="Gggg",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="NOT WORKING",
                                    icon=get_icon(icon="bi:house-door-fill"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        create_nav_link(
                                            label=page["name"], href=page["path"]
                                        )
                                        for page in dash.page_registry.values()
                                        if page["path"].startswith("/chapter3")
                                    ],
                                ),
                                dmc.NavLink(
                                    label="KKsdang",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                            ],
                            style={"white-space": "nowrap"},
                        )
                    ],
                    style={
                        "overflow": "hidden",
                        "transition": "width 0.3s ease-in-out",
                        "background-color": "#343a40",
                    },
                ),
                dmc.Drawer(
                    title="Company Name",
                    id="drawer-simple",
                    padding="md",
                    zIndex=10000,
                    size=300,
                    overlayOpacity=0.1,
                    children=[
                    ], style={'background-color': ''}, styles={'drawer': {'background-color': '#343a40'}}),
                dmc.Container(
                    [
                        dmc.Header(
                            height=60,
                            children=[
                                dmc.Group(
                                    [
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="sidebar-button",
                                                )
                                            ],
                                            smallerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="drawer-demo-button",
                                                )
                                            ],
                                            largerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.Text("Company Name"),
                                    ]
                                )
                            ],
                            p="10px",
                            style={"backgroundColor": "#fff"},
                        ),
                        html.P(dbc.Container(dcc.Graph(figure=fig),
                                             fluid=True)),
                    ],
                    id="page-container",
                    p=0,
                    fluid=True,
                    style={
                        "background-color": "#f4f6f9",
                        "width": "100%",
                        "margin": "0",
                    },
                ),
            ],
            size="100%",
            p=0,
            m=0,
            style={"display": "flex"},
        ),
        html.Div()],
)


@app.callback(
    Output("sidebar", "width"),
    Input("sidebar-button", "n_clicks"),
    State("sidebar", "width"),
    prevent_initial_call=True,
)
def drawer_demo(opened, width):
    if opened:
        if width["base"] == 300:
            return {"base": 70}
        else:
            return {"base": 300}
    else:
        raise dash.exceptions.PreventUpdate


@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_dem(n_clicks):
    return True


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

You need to make sure you have the dbc stylesheet working. :slight_smile:

9

for me it doesnt work… when the sidebar is collapsed it cannot expand back with the graph in the layout

image
image525×699 4.79 KB

could it be package versions? which ones do you have?

10

That issue arises from the secondary dmc.Container

I added some other styling to help it shrink back down, and forced the NavBar to always never shrink:

import dash
from dash_iconify import DashIconify

from dash import html, Output, Input, State, dcc
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

import plotly.express as px

app = dash.Dash(__name__, #external_stylesheets=[dbc.themes.BOOTSTRAP]
                )


def get_icon(icon):
    return DashIconify(icon=icon, height=16, color="#c2c7d0")


def create_nav_link(label, href):
    return dmc.NavLink(
        label=label,
        href=href,
        style={'display': 'inline-block'},
    )

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')


app.layout = dmc.MantineProvider(
    theme={
        "fontFamily": '"Inter", sans-serif',
        "components": {
            "NavLink": {"styles": {"label": {"color": "#c2c7d0"}}}
        },
    },
    children=[
        dmc.Container(
            [
                dmc.Navbar(
                    p="md",
                    fixed=False,
                    width={"base": 300},
                    hidden=True,
                    hiddenBreakpoint="md",
                    position="right",
                    height="100vh",
                    id="sidebar",
                    children=[
                        html.Div(
                            [
                                dmc.NavLink(
                                    label="HOME",
                                    icon=get_icon(icon="tabler:settings-2bi:house-door-fill"),
                                    href="/",
                                ),
                                dmc.NavLink(
                                    label="kkk",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="Gggg",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="NOT WORKING",
                                    icon=get_icon(icon="bi:house-door-fill"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        create_nav_link(
                                            label=page["name"], href=page["path"]
                                        )
                                        for page in dash.page_registry.values()
                                        if page["path"].startswith("/chapter3")
                                    ],
                                ),
                                dmc.NavLink(
                                    label="KKsdang",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                            ],
                            style={"white-space": "nowrap"},
                        )
                    ],
                    style={
                        "overflow": "hidden",
                        "transition": "width 0.3s ease-in-out",
                        "background-color": "#343a40",
                        "flexShrink": "0"
                    },
                ),
                dmc.Drawer(
                    title="Company Name",
                    id="drawer-simple",
                    padding="md",
                    zIndex=10000,
                    size=300,
                    overlayOpacity=0.1,
                    children=[
                    ], style={'background-color': ''}, styles={'drawer': {'background-color': '#343a40'}}),
                dmc.Container(
                    [
                        dmc.Header(
                            height=60,
                            children=[
                                dmc.Group(
                                    [
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="sidebar-button",
                                                )
                                            ],
                                            smallerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.MediaQuery(
                                            [
                                                dmc.Button(
                                                    DashIconify(
                                                        icon="ci:hamburger-lg",
                                                        width=24,
                                                        height=24,
                                                        color="#c2c7d0",
                                                    ),
                                                    variant="subtle",
                                                    p=1,
                                                    id="drawer-demo-button",
                                                )
                                            ],
                                            largerThan="md",
                                            styles={"display": "none"},
                                        ),
                                        dmc.Text("Company Name"),
                                    ]
                                )
                            ],
                            p="10px",
                            style={"backgroundColor": "#fff"},
                        ),
                        html.Div(dbc.Container(dcc.Graph(figure=fig), fluid=True)),
                    ],
                    id="page-container",
                    p=0,
                    fluid=True,
                    style={
                        "background-color": "#f4f6f9",
                        "width": "100%",
                        "margin": "0",
                        "maxWidth": "100%", "overflow": "hidden", 'flexShrink': '1'
                    },
                ),
            ],
            size="100%",
            p=0,
            m=0,
            style={"display": "flex", "maxWidth": "100vw", "overflow": "hidden"},
        ),
        html.Div()],
)


@app.callback(
    Output("sidebar", "width"),
    Input("sidebar-button", "n_clicks"),
    State("sidebar", "width"),
    prevent_initial_call=True,
)
def drawer_demo(n, width):
    if n:
        if width["base"] == 300:
            return {"base": 70}
        else:
            return {"base": 300}
    else:
        raise dash.exceptions.PreventUpdate


@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_dem(n_clicks):
    return True


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

Thanks a lot, it works!!
I’m assuming you had to make the Navbar width={“base”: 300} larger up to 300 so that it went over the threshold, and added the style “flexshrink” to both main container and navbar.
I still dont understand why it worked with html and not with dcc.Graph but I guess that’s another level…

12

dcc.Graph and plotly adds width as a style, in pixels.

I guess something about the container wasn’t allowing it to collapse, so I set the navbar to take priority by not allowing it to shrink, which meant that the other did have to. :grin:

If you want to find out more how this works, check out css flexbox.

1 Like
13

Hello again!

Is there a possibility that the sidebar upon being collapsable, it also scrolls down and is so to say “fixed” to the screen?

I tried the easy way already, setting dmc.Navbar ( … fixed=True … ) but collapsing behaviour stops…

Woulb be extremely thankful, i know this is going already a bit far of the plotly scope

1 Like
14

Hello @Mmmwhy,

Made a couple of changes:

import dash
from dash_iconify import DashIconify

from dash import html, Output, Input, State, dcc
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

import plotly.express as px

app = dash.Dash(__name__, #external_stylesheets=[dbc.themes.BOOTSTRAP]
                )


def get_icon(icon):
    return DashIconify(icon=icon, height=16, color="#c2c7d0")


def create_nav_link(label, href):
    return dmc.NavLink(
        label=label,
        href=href,
        style={'display': 'inline-block'},
    )

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')


app.layout = dmc.MantineProvider(
    theme={
        "fontFamily": '"Inter", sans-serif',
        "components": {
            "NavLink": {"styles": {"label": {"color": "#c2c7d0"}}}
        },
    },
    children=[
        dmc.Container([
            dmc.Navbar(
                    p="md",
                    fixed=False,
                    width={"base": 300},
                    hidden=True,
                    hiddenBreakpoint="md",
                    position="right",
                    height="100vh",
                    id="sidebar",
                    children=[
                        html.Div(
                            [
                                dmc.NavLink(
                                    label="HOME",
                                    icon=get_icon(icon="tabler:settings-2bi:house-door-fill"),
                                    href="/",
                                ),
                                dmc.NavLink(
                                    label="kkk",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="Gggg",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                                dmc.NavLink(
                                    label="NOT WORKING",
                                    icon=get_icon(icon="bi:house-door-fill"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        create_nav_link(
                                            label=page["name"], href=page["path"]
                                        )
                                        for page in dash.page_registry.values()
                                        if page["path"].startswith("/chapter3")
                                    ],
                                ),
                                dmc.NavLink(
                                    label="KKsdang",
                                    icon=get_icon(icon="tabler:fingerprint"),
                                    childrenOffset=28,
                                    opened=False,
                                    children=[
                                        dmc.NavLink(label="P"),
                                        dmc.NavLink(label="A"),
                                        dmc.NavLink(label="V"),
                                    ],
                                ),
                            ],
                            style={"white-space": "nowrap"},
                        )
                    ],
                    style={
                        "overflow": "hidden",
                        "transition": "width 0.3s ease-in-out",
                        "background-color": "#343a40",
                    },
            ),
            dmc.Drawer(
                title="Company Name",
                id="drawer-simple",
                padding="md",
                zIndex=10000,
                size=300,
                overlayOpacity=0.1,
                children=[],
                style={'background-color': ''}, styles={'drawer': {'background-color': '#343a40'}}
            ),
            dmc.Container(
                [
                    dmc.Header(
                                height=60,
                                children=[
                                    dmc.Group(
                                        [
                                            dmc.MediaQuery(
                                                [
                                                    dmc.Button(
                                                        DashIconify(
                                                            icon="ci:hamburger-lg",
                                                            width=24,
                                                            height=24,
                                                            color="#c2c7d0",
                                                        ),
                                                        variant="subtle",
                                                        p=1,
                                                        id="sidebar-button",
                                                    )
                                                ],
                                                smallerThan="md",
                                                styles={"display": "none"},
                                            ),
                                            dmc.MediaQuery(
                                                [
                                                    dmc.Button(
                                                        DashIconify(
                                                            icon="ci:hamburger-lg",
                                                            width=24,
                                                            height=24,
                                                            color="#c2c7d0",
                                                        ),
                                                        variant="subtle",
                                                        p=1,
                                                        id="drawer-demo-button",
                                                    )
                                                ],
                                                largerThan="md",
                                                styles={"display": "none"},
                                            ),
                                            dmc.Text("Company Name"),
                                        ]
                                    )
                                ],
                                p="10px",
                                style={"backgroundColor": "#fff"},
                    ),
                    dmc.Container(
                        [
                            html.Div(dbc.Container(dcc.Graph(figure=fig), fluid=True)),
                            html.Div(dbc.Container(dcc.Graph(figure=fig), fluid=True)),
                            html.Div(dbc.Container(dcc.Graph(figure=fig), fluid=True)),
                            html.Div(dbc.Container(dcc.Graph(figure=fig), fluid=True)),
                        ],
                        id="page-container",
                        p=0,
                        fluid=True,
                        style={
                            "background-color": "#f4f6f9",
                            "width": "100%",
                            "margin": "0",
                            "maxWidth": "100%", "overflow": "auto", 'flexShrink': '1', "maxHeight": "100%"
                        },
                    ),
                ],
                size="100%",
                p=0,
                m=0,
                style={"display": "flex", "maxWidth": "100vw", "overflow": "hidden",
                       "flexGrow": "1", "maxHeight": "100%", "flexDirection": "column"},
                id="content-container"
            ),
            ], size="100%",
                p=0,
                m=0,
                style={"display": "flex", "maxWidth": "100vw", "overflow": "hidden", "maxHeight": "100vh",
                       "position": "absolute", "top": 0, "left": 0, "width": "100vw"},
        id="overall-container"),],
)


@app.callback(
    Output("sidebar", "width"),
    Input("sidebar-button", "n_clicks"),
    State("sidebar", "width"),
    prevent_initial_call=True,
)
def drawer_demo(n, width):
    if n:
        if width["base"] == 300:
            return {"base": 70}
        else:
            return {"base": 300}
    else:
        raise dash.exceptions.PreventUpdate


@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_dem(n_clicks):
    return True


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

The navbar should stay put, while the content on the right is able to scroll.

image
image1907×558 18.5 KB

2 Likes
15

Thanks again, worked like a charm. I hope to be able by the end of August to post my multi-page dashboard (with synthetisized data) and contribute a tiny bit such way

2 Likes