Black Lives Matter. Please consider donating to Black Girls Code today.

Columns don't seem to work after v1.0.0

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.

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"
    ),

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

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

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

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!