Dash 2.0 update bootstrap components style bugs?

Dash Python
1

I am new to the plotly forum so if this has been posted in the wrong place then I apologise!

I am working on a multi page app and have recently migrated to Dash 2.0. I have noticed some minor bugs and was wondering if anyone else had encountered these.

Bootstrap alerts

The dismiss (x) button in the top right corner of alerts now doesn’t render correctly - it appears in the left hand corner and is stylised as some sort of minus sign (see below)

alert bug
alert bug725×237 10.2 KB

Bootstrap checklists no longer show as toggles when ‘switch=True’ passed

Checklists stylised as toggle switches have now reverted back to simple checkboxes since the Dash 2.0 update (see below)

toggle bug
toggle bug773×108 9.56 KB

Bootstrap striped progress bar

Striped progress bar now doesn’t show correctly - the colour is missing as well as the striped pattern (see below)

progress bug
progress bug728×213 13.7 KB

If anyone has any idea for ways to forcefully style these elements back to how they should appear (using css perhaps), or if anyone has encountered these bugs, then please let me know.

2

hi @Henryp1997

Welcome to the community. And thanks for your question.

did you remember to include the Bootstrap theme where you instantiate Dash?
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

Also, what dash-Bootstrap-components version are you using?

Can you share the example code with us, where these error are coming up?

3

Hi @adamschroeder

That solved it!

Out of curiosity - this argument was not present in my app when using Dash 1.x, yet the styling still worked. Is this argument a Dash 2 change?

4

I don’t think so. Maybe you had the bootstrap styling sheet incorporated into your app in a different way. I’m pretty sure this needed to be done with Dash 1.x as well.

I’m glad it’s solved.

Happy Plotly coding.

1 Like