DBC Modal doesn't open up properly?

Dash Python
1

I am trying to include a fullscreen dbc.Modal (picked up the example directly from this link) into my Dash app and it doesn’t seem to be working as expected. For some reason, the popup shows up at the end of the page:

image
image2549×164 11.5 KB

Note that this problem has been discussed on this link, but the solution proposed (changing stylesheet) didn’t help.

I can’t post the whole code (it’s too big), but I can post the relevant parts:

I declare the dash component here:

dbc.Modal([dbc.ModalHeader(dbc.ModalTitle("Fullscreen modal")),
           dbc.ModalBody("Wow this thing takes up a lot of space..."), ], id="modal-fs", fullscreen=True),

This is the button which is supposed to launch the Modal:

html.Button("Launch modal", id="open-modal-btn", n_clicks=0, style={'font-size':'100%',  # The launch modal button
                                                                      'background-color':'rgb(33, 33, 33)',
                                                                      'color':'rgb(20, 230, 144)',
                                                                      'border':'none',
                                                                      'border-radius':'5px',
                                                                      'padding':'5px 10px',
                                                                      'cursor':'pointer',
                                                                      'margin-right':'5px'}),

And this is the function that registers the callback

@self.app.callback(
    Output("modal-fs", "is_open"),
    Input("open-modal-btn", "n_clicks"),
    State("modal-fs", "is_open"),
)
def toggle_modal(n, is_open):
    if n:
        return not is_open
    return is_open

I would appreciate any help. Thanks in advance!

2

Hey @Spitfire, I guess you included the dbc stylesheet?

import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
modal = html.Div(
    [
        dbc.Button("Open modal", id="open-fs"),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Fullscreen modal")),
                dbc.ModalBody("Wow this thing takes up a lot of space..."),
            ],
            id="modal-fs",
            fullscreen=True,
        ),
    ]
)

app.layout = html.Div(modal)

@app.callback(
    Output("modal-fs", "is_open"),
    Input("open-fs", "n_clicks"),
    State("modal-fs", "is_open"),
)
def toggle_modal(n, is_open):
    if n:
        return not is_open
    return is_open

if __name__ == "__main__":
    app.run(debug=True)
1 Like
3

Hey @AIMPED, yes indeed, I tried that, didn’t help

4

Strange. So the above posted MRE does not work on your machine? What does it show? Do you get any errors/warnings?

I used dash 3.0.4 and dbc 2.0.2