Modal popup not being centered

Dash Python
1

I am using modal to show a graph as popup on clicking but instead of being in center of page on clicking, it is going at the bottom of the page.

Gif:
modal1_gif

Code:

modals = html.Div(
    [
        dbc.Button(
            "Click to see Affected Regions over the Years",
            id="open-centered",
            color="dark",
            className="mr-1",
            style={"height": "40px", "background-color": "crimson"},
        ),
        dbc.Modal(
            [
                dbc.ModalBody(dcc.Graph(id="regions", figure=fig1)),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close-centered", className="ml-auto")
                ),
            ],
            id="modal-centered",
            is_open=False,
            centered=True,
            autoFocus=True,
            size="lg",
            keyboard=True,
            fade=True,
            backdrop=True,
        ),
    ]
)

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

Hoping for help.

2

From the screenshot it looks like the Bootstrap styles aren’t being applied? Have you linked a stylesheet?

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

Is it compulsory to add external stylesheet? As I am using css styling in every section.

4

You’re going to need some Bootstrap styling for the Bootstrap components to look right. If you really don’t want to link all of the stylesheet and do most of the styling yourself you could copy just the modal styles from Bootstrap CSS.

5

Hi @matsujju

Hope you got this sorted! I’m using modals using dash bootstrap and have had no problems with centering, but I’m not an expert on this stuff.

Can I ask a side question: how did you do that cool little GIF screen capture???

Dan

6

Hi Dan,
With respect to Modals as you suggested for popup I am thankful for that, but As I was using Cards to divide the sections, the bootstrap styling makes it kinda not good so I am figuring out how to delete these and then use external styling.
For you question about GIF, I used some extension in Chrome(as it has many than firefox or others) for screen recorder and then then convert recorded video to GIF using online GIF converter. You can use any from many.