search

GibbsConsulting / django-plotly-dash

Expose plotly dash apps as django tags
MIT License
544 stars 122 forks source link

bootstrap 5 compatibility #359

Open folmerkrikken opened 2 years ago

folmerkrikken commented 2 years ago

Hi, thanks for this great application!

I've been playing with the new pre-release of dash-bootstrap-components v1 (switch to bootstrap 5) and was wondering if I could already use this in combination with django-plotly-dash. The documentation specifically mentions bootstrap 4, so I'm wondering if I could just change all 4's to 5's in the mentioned steps needed to include bootstrap in my apps. I've noticed dpd-static-support also uses bootstrap 4. Could this be an issue when changing to bootstrap 5?

Thanks, Folmer Krikken

delsim commented 2 years ago

I suspect that at the moment you'll get a mix of bootstrap 4 and 5 being used. If you are in a position to try it and report what you find, that would be great, but any issues will be feature requests rather than bugs.

Is bootstrap 5 backwards compatible with bootstrap 4?

folmerkrikken commented 2 years ago

In the meantime I indeed tested it and now I have a dash application running on www.climateradar.com/tools/clim_analyzer using the pre-release dash-bootstrap-components v1. It seems to work quite well. I've tried to add some specific v1 components (accordion and offcanvas) and they worked okay. I did have some callbacks that stopped working for which I needed a work around. This might be related to a mix of bootstrap 4 with bootstrap 5 but I'm not sure on this. In order to get it working I installed django-bootstrap-v5 and the pre-release of dash-bootstrap-components v1. I had to change from bootstrap4.bootstrap import css_url to from bootstrap5.bootstrap import css_url in the file dash_wrapper.py. In my settings.py I've added bootstrap5 to INSTALLED_APPS and removed dash_renderer, dash_core_components and dash_html_components from the PLOTLY_COMPONENTS and added dash. Not sure if the latter is needed, but with Dash V2 the removed components are now part of Dash.

Concerning dash-bootstrap-components there are unfortunately quite some breaking changes (https://dbc-v1.herokuapp.com/migration-guide/) so I needed to change quite a bit of code. Mainly because I was using a lot of block buttons which is no longer supported with the block keyword. But the new release has quite some nice features so it seems to be worth it.