Make Bootstrap Modal bigger than 'xl'

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!

3 posts - 2 participants

Read full topic