Navbar sticky=top overlaps Dash's debug-error-card

[amarvin]

• dash version: 1.19.0
• dash-bootstrap-components version: 0.11.1
• components affected by bug: dbc.NavbarSimple and dbc.Navbar

What is happening?

Dash in debug mode nicely displays callback error traceback in a <div> with class debug-error-card, but the dash_bootstrap_components navbars overlap it when sticky="top", making the latest callback error traceback hard or impossible to read.

What should be happening?

Dash debug cards should display below or ontop of the dash_bootstrap_components navbar.

Code

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

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

navbar1 = dbc.NavbarSimple(brand="dbc.NavbarSimple", sticky="top")
navbar2 = dbc.Navbar(
    dbc.Container(dbc.NavbarBrand("dbc.Navbar")),
    sticky="top",
)

content = dbc.Container(html.Button("Swap navbars", id="swap-navbars"))

app.layout = html.Div([navbar1, content], id="layout")


@app.callback(
    Output("layout", "children"),
    [Input("swap-navbars", "n_clicks")],
    [State("layout", "children")]
)
def raise_error(n_clicks, layout):
    if not n_clicks:
        # Raise a callback error initially
        raise TypeError
    elif layout[0]["type"] == "NavbarSimple":
        return [navbar2, content]
    else:
        return [navbar1, content]


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

Error messages

[tcbegley]

Thanks for raising this @amarvin

It's because the sticky navbar has a higher z-index than the Dash error menu. I don't think we can get the Bootstrap style changed, but maybe the Plotly team would accept a PR adjusting the z-index of the error menu. I'll see what they think.

In the mean time, you can work around this by adding some custom CSS to your assets/ folder

.dash-error-card.dash-error-card--container {
    z-index: 1100;
}

[tcbegley]

Submitted a PR to fix this over at plotly/dash#1553

[tcbegley]

My PR to Dash was accepted, so this should be resolved as of their next release.