search

facultyai / dash-bootstrap-components

Bootstrap components for Plotly Dash
https://dash-bootstrap-components.opensource.faculty.ai/
Apache License 2.0
1.12k stars 220 forks source link

app with dash bootstrap components Ugly(doesn't render correctly) on newer chromium browser #810

Closed webe3 closed 2 years ago

webe3 commented 2 years ago

I have a dash app that is using dash-bootstrap-components that works fine on older version of chromium but does not render properly on newer version of chromium. It seems to work fine in Firefox. On the newer versions of chromium, the application does not seem to give any errors that I can find. It just renders ugly. OS: Debian GNU Linux bookwork/testing Python: 3.9.10 Dash: 2.1.0 Dash bootstrap components: 1.0.3 working chromium: 93.0.4577.82-1 failing chromium: 97.0.4692.99-1 and 98.0.4758.80- working_ss failing_ss 1

tcbegley commented 2 years ago

Looks to me like the external CSS isn't getting loaded. Can you check that Chromium isn't blocking the stylesheet for some reason?

The relevant URL is https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css assuming you're using dbc.themes.BOOTSTRAP.

webe3 commented 2 years ago

I can go to the url you listed in the browser. @charset "UTF-8";/*!

webe3 commented 2 years ago

Here is another pair of screenshots of simple_sidebar that is a small example of a sidebar. The ugly one is in chromium the nice one is in firefox. I also included the source code. ugly_sidebar sidebar simple_sidebar_orig.py.txt

tcbegley commented 2 years ago

I just tried running your example with the latest build of Chromium (Version 100.0.4876.0) and am not seeing the same problems.

Can you open the developer tools, navigate to the "Network" tab and refresh your app and see if there are any clues as to why the stylesheet is not loading? You should see it listed as bootstrap.min.css. As you can see from my screenshot I load it successfully and get a 200 status code.

image

webe3 commented 2 years ago

I found this: https://community.plotly.com/t/dash-bootstrap-components-in-ie-chrome/34362/4 If I do what they did in there my applications render correctly. (i.e. I download the .css and put it in my assets folder and point to that it works.

It seems like it is something to do with getting out through my company firewall. With firefox and previous versions of chromium it didn't seem to have so much trouble. I finally did get it to work intermittently through the new Chromium.

Is there a way to deal with the firewall or proxy or whatever it is that is blocking besides copying the .css locally?

debug

tcbegley commented 2 years ago

Based on the Location field in the response headers it looks to me like the cross-origin request for the stylesheet is being blocked by your company's firewall. It's not clear to me why that would happen on Chromium but not Firefox (assuming they're on the same network), but you might need to ask your network administrator.

If it is a cross-origin request being blocked, you could simply download the stylesheet at the above link and put it in your app's assets/ folder so that the stylesheet is served locally. In that case you don't need to bother with the external_stylesheets argument in the Dash constructor. See more details here about including CSS.

webe3 commented 2 years ago

It seems like Firefox and Chromium may handle the firewall differently. On both I have to visit any web site and let it prompt me for the authorization. After the initial prompt, they will cache the fact that I have already authorized and then things will work properly for some period of time until the firewall thinks it needs me to authorize again. For some reason Chromium wasn't caching and thus would keep failing with the app. It seems to be caching the authorization now and the app works. If I get tired of the firewall annoyance, I will just use the stylesheet in the assets.

Thank you.