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 ]) 
1 Answer
As suggested by Daniel Al Mouiee, changing the Z-Index of the graphs parent container fixed the issue
ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobmpuYWiFeoGOqaOorJyueqWt0qFkm6efqMGzrc9mm6unoGKxsMPNZqSepqVitrR50Z6lnZ2imrFursShoKecXam1pnnToZxmqJykwa3FjKCpmqiYYryjtsQ%3D