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

Dash Python
1

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)

2

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])
3 Likes
3

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

1 Like
4

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.

5

Try this

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

Hello:

I am having the same problem. my test app is running in a closed environment so no access to the external stylesheet, but I do have a copy of bootstrap.css file in the assets folder. The modal doesn’t pop over the screen but displayed below the last element on screen. Please let me know if you have any suggestions.

Thanks

Xiali

1 Like
8

I got this figured out. there was a copy of bootstrap.min.css in the assets folder before I copied bootstrap.css over. once I removed the bootstrap.min.css file from the assets folder. the pop up modal started to work. thanks

1 Like
9

Just wanted to say this also fixed my issue immediately, thank you for the help.

1 Like