Dash not aligning second row to left of frame

Dash Python
1

I am trying to make a Dash app with row one with three Plotly graphs and row two with two Plotly graphs but when I do this row one is fine. Row two seems to have an indent of one column, and so two ‘six column’ graphs cause the second row 2 column 2 graph to appear below row 2 column 1 graph

image
image3784×1750 163 KB

I realise I have missed something fundamental but I can’t figure it out. Any help is welcome. Below is the code I was using to make the layout.

import dash
from dash import html, Input, Output, dcc
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd



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

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

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    # All elements from the top of the page
    html.Div([
        html.Div([
            html.H1(children='Row 1, Column 1'),

            html.Div(children='''
                Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph1',
                figure=fig
            ),
        ], className='four columns'),
        html.Div([
            html.H1(children='Row 1, Column 2'),

            html.Div(children='''
                Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph2',
                figure=fig
            ),
        ], className='four columns'),
        html.Div([
            html.H1(children='Row 1, Column 3'),

            html.Div(children='''
            Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph3',
                figure=fig
            ),
        ], className='four columns'),
    ], className='row'),

    # New Div for all elements in the new 'row' of the page
    html.Div([
        html.H1(children='Row 2, Column 1'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph4',
            figure=fig
        ),
    ], className='six columns'),
    html.Div([
        html.H1(children='Row 2, Column 2'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph5',
            figure=fig
        ),
    ], className='six columns'),
], className='row')

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

@twelsh37,

It looks like you were missing the html.Div enclosing the second row. Thus your rows werent aligning properly. Make sure the below code works right.

import dash
from dash import html, Input, Output, dcc
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd



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

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

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    # All elements from the top of the page
    html.Div([
        html.Div([
            html.H1(children='Row 1, Column 1'),

            html.Div(children='''
                Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph1',
                figure=fig
            ),
        ], className='four columns'),
        html.Div([
            html.H1(children='Row 1, Column 2'),

            html.Div(children='''
                Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph2',
                figure=fig
            ),
        ], className='four columns'),
        html.Div([
            html.H1(children='Row 1, Column 3'),

            html.Div(children='''
            Dash: A web application framework for Python.
            '''),

            dcc.Graph(
                id='graph3',
                figure=fig
            ),
        ], className='four columns'),
    ], className='row'),

    # New Div for all elements in the new 'row' of the page
    html.Div([html.Div([
        html.H1(children='Row 2, Column 1'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph4',
            figure=fig
        ),
    ], className='six columns'),
    html.Div([
        html.H1(children='Row 2, Column 2'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph5',
            figure=fig
        ),
    ], className='six columns')], className='row'),
])

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

@jinnyzor Thanks. I knew it would be something that simple. I just couldn’t spot it.