3

I am trying to build a dashboard using plotly-dash and bootstrap for python. Now I am trying to format the dashboard such that i have two columns with the input on the left and the graph on the right. I am however not getting two columns. Below is a code example which should produce two columns, but doesn't (moste likely my mistake though). I've tried to simplify the code as much as possible but it's still not working.

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])
row = html.Div([
    dbc.Container(
    [
        dbc.Row(dbc.Col(html.Div("A single column"))),
        dbc.Row(
            [
                dbc.Col(html.Div("One of two columns")),
                dbc.Col(html.Div("One of two columns")),
            ]
        ),
    ]
    )
])

app.layout = row

Returns the following;

web browser output

The html code is the following; html output

Console error/issue; Issues / errors i see in browser

Joep
  • 31
  • 4
  • Could it be that you have some styles in your `assets` folder that conflict? Because it works when I test it. Also what dash_bootstrap_components version are you using? Can you also print the value of `dbc.themes.DARKLY` and put that in a comment or in the question? – 5eb Jul 12 '21 at 12:45
  • @BasvanderLinden, I do have an assets folder. However, I do not refer to this in the script I am running. Can this still be 'harmfull' then? I am using version 0.8.3. `dbc.themes.DARKLY` produces the following; 'https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/darkly/bootstrap.min.css' – Joep Jul 12 '21 at 13:11
  • If you have css files in the `assets` folder these will be applied to the app by default and might conflict with the darkly styles depending on what's inside those files. Version and stylesheet links looks fine. Latest version is `0.12.2` so you could upgrade, but your version works for me also. – 5eb Jul 12 '21 at 13:12
  • If you have css files in the assets folder you could temporarily move them outside to see if that's the problem or it's something else. – 5eb Jul 12 '21 at 13:19
  • I deleted the assets folders but no success. Updating the package is quite a hassle since I'll have to go through my it administrator for that. – Joep Jul 12 '21 at 13:22
  • Kind of a long shot, but does this work `app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])`? If not I suggest you inspect the elements in the browser and look if the classes are applied as expected. i.e. the `row` and `col` classes. Look in the network tab for requests for stylesheets and if any of them are failing. Look in the sources tab if the link to the stylesheet is present etc... – 5eb Jul 12 '21 at 13:29
  • 1
    Adding `__name__` did not work unfortunatly. The col and row classes seem to work in html. I am however getting the errors of which I posted a screenshot in the answer. – Joep Jul 12 '21 at 13:42
  • 1
    Yeah the error on the top is definitely the problem so I would try to figure out how to solve that. I'm not sure how to fix that. Might be something to talk to your it admin about. https://www.drivereasy.com/knowledge/err-tunnel-connection-failed-error-chrome-solved/ – 5eb Jul 12 '21 at 13:53
  • 1
    This was indeed the problem! I fixed it by downloading the style sheet and referencing it locally. Thanks! – Joep Jul 12 '21 at 14:16

0 Answers0