Setting width of Toast (Dash Bootstrap Component)

Dash Python
1

Hello,

I’m currently working on a Toast from Dash Bootstrap Component and I was wondering if you can increase the width of the Toast?

I’ve tried:

html.Div(
[
dbc.Toast(
table,
id=“positioned-toast”,
is_open=True,
dismissable=True,
fade=True,
# top: 66 positions the toast below the navbar
style={“position”: “absolute”, “bottom”: 100, “left”: 80, “height”:298,‘position-class’:‘toast-top-full-width’},
),
]

AND

html.Div(
[
dbc.Toast(
table,
id=“positioned-toast”,
is_open=True,
dismissable=True,
fade=True,
# top: 66 positions the toast below the navbar
style={“position”: “absolute”, “bottom”: 100, “left”: 80, “height”:298, “width”: 700},
),
]

But nothing seems to change…
Is there a limit on the Toast width? If so, please let me know.

Thank you!

2

Bootstrap sets the max-width of the toast to 350px, you just need to override that, which you can do with the style argument. Here’s an example

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Toast(
    "Hello", header="This is the header", style={"maxWidth": "500px"}
)

if __name__ == "__main__":
    app.run_server(debug=True)
3

Great! Thank you so much :slight_smile: Appreciate your help

1 Like
4

Hello,

I tried to do that and this is what I got?
image

it doesn’t seem to change the size at all…

Any help is appreciated!

5

If I run the exact code I posted I see this

image
image1196×514 13.8 KB

Are you including CSS in addition to Bootstrap? It’s possible you have a conflict or something perhaps?

6

I had the same issue as you. Try to use width instead of maxWidth (e.g. style={"width": "100%"}).