Problem layout dash

Dash Python
1

Hello everyone,

I am going through the tutorial Dash and get web app looking different from the apps in the tuto. For instance, taking the code given by chriddyp in the following topic How to manage the layout of division/figures in dash

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(
        className="row",
        children=[
            html.Div(
                className="six columns",
                children=[
                    html.Div(
                        children=dcc.Graph(
                            id='left-graph',
                            figure={
                                'data': [{
                                    'x': [1, 2, 3],
                                    'y': [3, 1, 2],
                                    'type': 'bar'
                                }],
                                'layout': {
                                    'height': 800,
                                    'margin': {
                                        'l': 10, 'b': 20, 't': 0, 'r': 0
                                    }
                                }
                            }
                        )
                    )
                ]
            ),
            html.Div(
                className="six columns",
                children=html.Div([
                    dcc.Graph(
                        id='right-top-graph',
                        figure={
                            'data': [{
                                'x': [1, 2, 3],
                                'y': [3, 1, 2],
                                'type': 'bar'
                            }],
                            'layout': {
                                'height': 400,
                                'margin': {'l': 10, 'b': 20, 't': 0, 'r': 0}
                            }
                        }
                    ),
                    dcc.Graph(
                        id='right-bottom-graph',
                        figure={
                            'data': [{
                                'x': [1, 2, 3],
                                'y': [3, 1, 2],
                                'type': 'bar'
                            }],
                            'layout': {
                                'height': 400,
                                'margin': {'l': 10, 'b': 20, 't': 0, 'r': 0}
                            }
                        }
                    ),

                ])
            )
        ]
    )
])

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if __name__ == '__main__':
    app.run_server(debug=True)

I get the following ugly result:

51
513360×1830 178 KB

while I was expecting the following layout

============================
=            |  figure2    =                             
= figure1    |             =
=            |  figure3    =
============================

I am on macOs Mojave, using Python 3.7.5 and the following versions:
dash 1.4.1
dash-core-components: 1.3.1
dash-html-components: 1.0.1
dash-renderer: 1.1.2
dash-table: 4.4.1

Could you help please ?
Thank you!

1 Like
2

Hi @yoannp! Thanks for using Dash and posting on the community forum.

I think your problem is that the Codepen CSS stylesheet is not being retrieved. I’d recommend removing the app.css.append_css line, and changing your app instantiation, app = dash.Dash(), to

app = dash.Dash(
    __name__,
    external_stylesheets=[
        'https://codepen.io/chriddyp/pen/bWLwgP.css'
    ]
)

It looks like the behaviour of app.css.append_css has changed since Chris posted that example. If you check your terminal, there’s a helpful warning that recommends solving the problem in the way I suggested:

You have set your config to serve_locally=True but A local version of https://codepen.io/chriddyp/pen/bWLwgP.css is not available.
If you added this file with app.scripts.append_script or app.css.append_css, use external_scripts or external_stylesheets instead.
See Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly

3

Hi @wbrgss ! Thank you for your reply, you explanation was clear and correct !