Dash Bootstrap Components in IE/Chrome

Dash Python
1

Hi all

I am having problems with my dash app. I use bootstrap components dbc.Row dbc.Col for managing the layout and a dbc.SimpleNavBar. The problem ist that when calling the local host with internet explorer the layout and the Navbar works fine, the content however is cut at the edge of my webbrowser. When using Chrome, the bootstrap components do not work. The Navbar is displayed in an odd way and the dbc.Cols are not recognized. Did anybody experienced similiar problems? I assume that this is a browser setting issue?

Thanks for any feedback

2

I’m not aware of any browser setting that needs to be done…I use dash-bootstrap-compents for my app and there are no issues in IE, Chrome, Firefox…

Based on your post alone, do you have the following in your code - specifically the external_stylesheets reference?

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

Yes, have the correct stylesheet included. It‘s really strange. It must be dealing with some internal company restrictions/settings. I will let you know once I found a solution or explanation.

4

Hi @flyingcujo and others

Ok, so my Chrome somehow blocked the css file linked by dbc.themes.BOOTSTRAP

“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”

I donwloaded the file and put it in my assets folder. However, this was not enough. I had to explicitly specify the folder when creating the app:

app = dash.Dash(__ name__ ,external_stylesheets=[’\assets\bootstrap.css’])

Now all works fine.

Best regards

5

You shouldn’t have needed to specify the assets folder. However, in your last post you indicated the folder was asset vice assets.

6

ah sorry, that was a typo. folder Name assets\

7

ok…just double-checking…odd that you need to specify the path.

1 Like
8

I couldn’t get dbc.themes.FLATLY to work (Firefox) so am just using the full https path:
external_stylesheets = [‘https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/flatly/bootstrap.min.css’]
are there any further requirements we’re missing?

import dash_bootstrap_components as dbc
external_stylesheets = [‘dbc.themes.FLATLY’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout…etc.

9

does it work when using the full path instead of dbc.themes.FLATLY? Did you check the themes.py file in the lib folder?

10

dbc.themes.FLATLY shouldn’t be in quotes. Other than that, you’re implementing it the same way I am; except I am using dbc.themes.BOOTSTRAP

11

Thank you both. I actually just caught on to the quotes issue when Madison01 pointed to the actual themes.py file. BTW it is working now that the quotes are removed.

12

Awesome! Glad it’s working.

13

Great, we learned something