Dash Pages Issues with Page Container

Dash Python
1

Hey Everyone!! Not sure what Iā€™m messing up with the page container for it to appear below the navbar like this? Any help would be appreciated :slight_smile:

app.py

from dash_extensions.enrich import (
    DashProxy,
    html,
    dcc,
    callback,
    Input,
    Output,
    State,
    page_registry,
    page_container,
)
from flask import Flask

import dash_mantine_components as dmc
from dash_iconify import DashIconify

server = Flask(__name__)
app = DashProxy(
    __name__,
    server=server,
    use_pages=True,
    suppress_callback_exceptions=True,
)


def navbar():
    navlinks = dmc.Stack(
        spacing="md",
        justify="space-around",
        align="center",
        children=[
            dmc.Tooltip(
                position="right",
                label=page["title"],
                children=dcc.Link(
                    dmc.Button(
                        DashIconify(icon=page["nav_icon"]),
                        id={"type": "nav_btn", "index": page["order"]},
                        color="dark",
                        fullWidth=True,
                        variant="subtle",  # Convert variant to light if active.
                        disabled=page["disabled"],
                    ),
                    href=page["path"],
                ),
                disabled=page["disabled"],
            )
            for page in page_registry.values()
        ],
    )

    return dmc.Navbar(
        id="navbar",
        width={"base": 80},
        children=dmc.Center(
            children=navlinks, style={"height": "100%", "width": "100%"}
        ),
    )


def layout():
    return dmc.MantineProvider(
        withGlobalStyles=True,
        withNormalizeCSS=True,
        children=[
            dmc.NotificationsProvider(
                children=[
                    navbar(),
                    # dcc.Location(id="url"),
                    html.Div(
                        id="content_wrapper",
                        children=dmc.Container(
                            id="main_content",
                            fluid=True,
                            pt=20,
                            children=page_container,
                        ),
                    ),
                ],
            )
        ],
    )


app.layout = layout


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

pages/analytics.py

from dash_extensions.enrich import register_page
import dash_mantine_components as dmc
from dash_extensions.enrich import html

register_page(
    __name__,
    title="Analytics",
    nav_icon="ant-design:bar-chart-outlined",
    disabled=False,
    order=2,
)

def layout():
    return html.Div("test2")

pages/profile.py

from dash_extensions.enrich import register_page, Input, Output, callback
import dash_mantine_components as dmc
from dash_extensions.enrich import html

register_page(
    __name__,
    title="Profile",
    nav_icon="ant-design:search-outlined",
    disabled=False,
    order=1,
)

def layout():
    return dmc.Grid(
        dmc.Col(
            dmc.TextInput(
                id="wallet_select",
                label="Search for wallet",
            ),
            span=16,
        ),
        columns=32,
    )
1 Like
2

Just saw this post by @AnnMarieW regarding the aside component, so I will try to see whether I can use that instead, to solve my container problems as I need a few features from the new update anyways. Dash Mantine Components new release - 0.11.0a0 - #2 by AnnMarieW