Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash Modal from dbc doesn't pop over the screen but below the last element on screen

Hello,

I’m having an issue with the Modal components of Dash Bootstrap Components. When I click on the modal button, there is no modal window covering the screen appearing but rather a new element on the page below the button element (see the capture & the code below).

Capture

Has anyone ever encountered that issue? Is there a CSS element required to make the modal appear over the screen?

Thanks in advance,
Antoine

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

app = dash.Dash()

app.layout = html.Div([

        html.Div(
    [
        dbc.Button("Open modal", id="open"),
        dbc.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto"),
                ),
            ],
            id="modal",
        ),
    ],
),

])

@app.callback(
Output(“modal”, “is_open”),
[Input(“open”, “n_clicks”), Input(“close”, “n_clicks”)],
[State(“modal”, “is_open”)],
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open

if name == ‘main’:
app.run_server(debug=False)

You need to link a Bootstrap stylesheet. The easiest way is to do that in the Dash constructor using dbc.themes

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

Hi mate,
Thanks for the quick answer! It works perfectly.
Have a nice day.
Antoine

1 Like

How can i add new lines in dbc.ModalBody(‘Text in first line \n Text in second line’)

The result in the modal should be:

Text in first line
Text in second line

Please help me out. Thanks in advance.

Try this

dbc.ModalBody(["Text in first line",html.Br(),"Text in second line"])