Columns don't seem to work after v1.0.0

Dash Python
1

I have three HTML DIVs that I want to display next to each other so I use classname="four columns" on each of them. When I upgrade Dash from 0.43.0 to 1.0.0 or later (I tried 1.6.0 as well) all three DIVs take up the whole width and are thus displayed beneath each other.

I couldn’t find any info on a 1.0.0 breaking change regarding this, but did the syntax change anyway? Or was my code wrong before and did it accidentally work in 0.43.0? You can see my code here.

2

Does anyone have an idea if the syntax has changed to create 3 columns? To be more clear, here is the code where I use className="four columns":

    html.Div(
        dcc.Graph(
            id='un',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='nato',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='world_bank',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),
3

Are you sure the css file defining this class is read correctly? See https://dash.plot.ly/external-resources. The css file defining these different column styles is https://codepen.io/chriddyp/pen/bWLwgP.css, you have to add

xternal_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

to your code (or save a local copy in the assets directory).

1 Like
4

Thx @Emmanuelle! I didn’t include that stylesheet indeed. Was this changed (i.e., was the stylesheet included previously) in recent versions?

5

Hum I don’t know sorry! Maybe previously you had a script which already had these two lines of code, a lot the Dash doc examples have them.

1 Like
6

Ok, to be more exact as to what went wrong.

I used to have the following line which included some custom CSS (which included styling of the four columns classes): dash_app.css.append_css({"external_url": "/static/dash.css"})

Apparently this doesn’t work anymore after Dash 1.0.0. Changing it to the code from your solution indeed fixed it :)! Thx!