Arrange Cards in Column Next to Graph

Dash Python
1

Hello,

I have a fairly simple problem, but its proving to be more difficult than I imagined to solve. I have a graph on the left side of my dashboard (it’s blank for now - doesn’t matter what it is). This graph should take up 50% width of the row. The remaining 50% width in that row should be taken up by 3 cards that I want to have metrics displayed on.

However, when I place the cards in the dashboard, they do not align with the top of the graph. They are pushed down a little. Here is a reproducible example of my code so you can get an idea of what kind of issue I’m having:

import dash
import os
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc


card1 = dbc.Card([
        dbc.CardBody([
            html.H4("Num1"),
            html.P(f"Num1 Description")
        ])
    ],
    style={'width': '100%',
           'text-align': 'center',
           'background-color': 'rgba(104,108,252)',
           'color':'white'
           },
    outline=True)

card2 = dbc.Card([
        dbc.CardBody([
            html.H4("Num2"),
            html.P(f"Num2 Description")
        ])
    ],
    style={'width': '100%',
           'text-align': 'center',
           'background-color': 'rgba(104,108,252)',
           'color':'white'
           },
    outline=True)

card3 = dbc.Card([
        dbc.CardBody([
            html.H4("Num3"),
            html.P(f"Num3 Description")
        ])
    ],
    style={'width': '100%',
           'text-align': 'center',
           'background-color': 'rgb(104,108,252)',
           'color':'white'
           },
    outline=True)


app = dash.Dash(__name__,assets_folder=os.path.join(os.curdir,"assets"))
server = app.server
app.layout = html.Div([
                html.Div([
                    dcc.Graph(id='graph')
                ],style={'width': '50%','display': 'inline-block','text-align': 'center'}),
                html.Div([
                    dbc.Card(card1),
                    dbc.Card(card2),
                    dbc.Card(card3)
                ],style={'width': '50%','text-align': 'center','display': 'inline-block'})
        ])


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

I have played around with lots of different options for the display in the html.div and nothing seems to get the cards aligned properly with the graph.

Can someone help point me in the right direction? Thank you!

2

Hi @plotme1

I see you are using dash-bootstrap-components. See the this section of the docs for how to make the layout based on the Bootstrap grid system: Layout - dbc docs

And be sure to add a Bootstrap stylesheet to the app instance, for example:

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

Try running this example (note: it requires dash v2 and dbc v1, but if you need to run previous versions, the app.layout below remains the same)


from dash import Dash, html, dcc

import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


card1 = dbc.Card(
    [dbc.CardBody([html.H4("Num1"), html.P(f"Num1 Description")])],
    style={
        "width": "100%",
        "text-align": "center",
        "background-color": "rgba(104,108,252)",
        "color": "white",
    },
    outline=True,
)

card2 = dbc.Card(
    [dbc.CardBody([html.H4("Num2"), html.P(f"Num2 Description")])],
    style={
        "width": "100%",
        "text-align": "center",
        "background-color": "rgba(104,108,252)",
        "color": "white",
    },
    outline=True,
)

card3 = dbc.Card(
    [dbc.CardBody([html.H4("Num3"), html.P(f"Num3 Description")])],
    style={
        "width": "100%",
        "text-align": "center",
        "background-color": "rgb(104,108,252)",
        "color": "white",
    },
    outline=True,
)


app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(dcc.Graph(id="graph", className="border"), width=6),
                dbc.Col([card1, card2, card3]),
            ],
        )
    ],
    fluid=True,
)

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

Thank you @AnnMarieW ! This is exactly what I was looking for! Appreciate the post.

1 Like