Make Bootstrap Modal bigger than 'xl'

Dash Python
1

Hi,
I’m a Python developer but very new to Dash and HTML/CSS. I would like to have some advice on how to make the size of a Bootstrap Modal component bigger than using the attribute 'size=‘xl’. Ideally I would like to have a model which fills 90% of my screen.
The code I use for the modal is:

expanded_graph = html.Div(dbc.Modal(
    dbc.Row(dbc.Col([
        dbc.ModalHeader("Header"),
        dbc.ModalBody(html.Div(
            dcc.Graph(id='test_graph_expanded', config={'displayModeBar': False}))),
        dbc.ModalFooter(dbc.Button("Close", id="close2"))],
    )),
    id="modal2",
    size="xl",
    centered=True
)
)

I tried to change the width and height parameters from .modal in the bootstrap.css file, but that only works to make it smaller and not bigger than 100%.

Could someone suggest a solution?
Thanks in advance!

2

You can use the style argument of the modal. Something like

dbc.Modal(
    ...,
    style={"max-width": "none", "width": "90%"},
)
3

Thanks @tcbegley, your answer put me in the correct direction.
However, setting the style to

style={"max-width": "none", "width": "90%", "max-height":"none", "height":"90%"}

works for the width but not for the hight.
A solution I came up with is adding

style={"height": "80vh"}

to dcc.Graph.
So I’m now setting width and height in 2 different places. Is this the correct way to do this or is their a more elegant solution?

My working solution is now:

expanded_graph = dbc.Modal(
    [dbc.ModalHeader("Header"),
     dbc.ModalBody(
         dcc.Graph(id='test_graph_expanded',
                   config={'displayModeBar': False},
                   style={"height": "80vh"})),
     dbc.ModalFooter(dbc.Button("Close", id="close2"))],
    id="modal2",
    centered=True,
    style={"max-width": "none", "width": "90%"}
)
4

Is this the correct way to do this or is their a more elegant solution?

That seems fine to me to be honest. If you want you could probably move the modal styles into some custom CSS, but setting the width of the modal but the height of the Graph seems right in this case.

1 Like
5

Somehow it doe not work for me, not sure what is going wrong

import dash_bootstrap_components as dbc
from dash_extensions.enrich import (DashProxy, Input, Output, State, callback,
                                    html)

app = DashProxy(
    prevent_initial_callbacks=True,
    suppress_callback_exceptions=True,
    transforms=[],
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = html.Div(
    [
        dbc.Button("Open modal", id="open", n_clicks=0),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal",
            is_open=False,
            style={"max-width": "none", "width": "90%"},
            centered=True
        ),
    ]
)

@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


app.run_server(
    host='localhost', port=5050, threaded=True, debug=True
)

It still shows a small Modal

6

@krishvk Did you solve this issue? I am having the same challange