Plotly Dash Boostrap drop down menu is rendered behind the the plotly graph objects. Is there a way to stop this?

Question

I'm making a plotly - dash app that has a navigation side bar to browse through the different app pages (see code below). One of the navigation items contains a dbc.DropDownMenu that hangs over the edge of the navigation side bar into the main content area.

Most of the the time this isn't an issue, except when there are plotly graphs in the main content area. When there are graphs, the drop down menu is rendered below the graphs (see pictures). Is it possible to change the render order always have the drop down shown on top?

# styling the sidebar
SideBar_Style = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "18rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# padding for the page content
Content_Style = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}


sidebar = html.Div(
[
    html.H2("Navigation", className="display-4"),
    html.Hr(),
    html.P(
        "Select a page", className="lead"
    ),
    dbc.Nav(
        [dbc.NavLink("Home", href="/", active="exact"),
            dbc.NavLink("Timeseries", href="/pages/timeseries",
                        active="exact"),
            dbc.NavItem(
                dbc.Row([
                    dbc.Col(dbc.NavLink("Wind Roses",
                            href="/pages/windrose", active="exact"), width=10),
                    dbc.Col(dbc.DropdownMenu([dbc.DropdownMenuItem("Comparison", href="/pages/windrosecomparison", active="exact"),
                                              dbc.DropdownMenuItem("Item 2")], nav=True), width=2)], className="g-0")

        ),

            dbc.NavLink("Monthly Wind Speeds",
                        href="/pages/monthwindspeeds", active="exact"),
            dbc.NavLink("Recovery", href="/pages/recovery",
                        active="exact"),
            dbc.NavLink("Wind Shear", href="/pages/windshear",
                        active="exact"),
            dbc.NavLink("Diurnal", href="/pages/diurnal", active="exact"),
            dbc.NavLink("Campaign Map",
                        href="/pages/campaignmap", active="exact"),
            dbc.NavLink("TestPage", href="/pages/testpage",
                        active="exact"),
        ],
        vertical=True,
        pills=True,
    ),
],
style=SideBar_Style,
)

content = html.Div(id="page-content", children=[], style=Content_Style)

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

Have you tried giving the dropdown a greater `z-index` than that of the div or the graph figure object? https://www.w3schools.com/cssref/pr_pos_z-index.asp — Daniel Al Mouiee, Mar 27 '22 at 11:24

score 1 · Accepted Answer · answered Jun 18 '22 at 08:09

1

As suggested by Daniel Al Mouiee, changing the Z-Index of the graphs parent container fixed the issue

answered Jun 18 '22 at 08:09

Tim

173
1
11

Plotly Dash Boostrap drop down menu is rendered behind the the plotly graph objects. Is there a way to stop this?

1 Answers1