Help with dash plotly layout

Dash Python
1

How do i make the card occupy both the rows without disturbing the layout and putting the three cards below.
Please help me with this .


import pandas as pd
from sqlalchemy import create_engine
import dash_bootstrap_components as dbc
import dash_table
import dash_html_components as html
import dash_core_components as dcc
import datetime
from datetime import date
from dash.dependencies import Input, Output, State
from app import app
import dash

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
layout = dbc.Container(
    [
        html.Br(),
        html.Br(),
        dbc.Row([
            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                         
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),

            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                                
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),

            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),
            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                            ],
                            className="border-0 d-flex align-items-center",
                            style={"background-color": "#A6E3E9"}
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "330px", "border-radius": "10px", "background-color": "#E3FDFD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="5"),
        ]),
        html.Br(),
        html.Br(),
        dbc.Row([
            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                               
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),

            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                                
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),

            dbc.Col([
                dbc.Card(
                    [
                        dbc.CardHeader(
                            [
                                
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                        dbc.CardBody(
                            [
                                html.Img(src='assets/tickets.png',
                                         style={'height': '24px', 'width': '24px', 'margin-right': '10px'},
                                         alt='icon', className='img-fluid'),
                                html.H3("25", className="card-title"),
                            ],
                            className="border-0 d-flex align-items-center"
                        ),
                    ],
                    style={"height": "110px", "border-radius": "10px", "background-color": "#CDCDCD",
                           "box-shadow": "1px 2px 7px 0px grey"},
                    className="border-0"
                ),
            ], width="2"),
        ])

    ]
)

app.layout = dbc.Container([
    layout
], fluid=True)

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

Screenshot_2
Screenshot_21912×874 33.3 KB

How do i bring the three cards up aligned to the monthwise ticket graph.

2

Start with two columns. Width=6. On the left column add the 3 cards. On the right column add the card occupying two rows.

1 Like
3

Here a MRE:

import dash_bootstrap_components as dbc
from dash import Dash, html

card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    style={"width": "18rem"},
    className='p-1'
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
    [
        dbc.Row([
            dbc.Col(
                [
                    dbc.Row(
                        dbc.Stack(
                            [card for _ in range(3)],
                            direction='horizontal'
                        )
                    )
                    for _ in range(2)
                ],
                width=6
            ),
            dbc.Col(
                dbc.Row(
                    card,
                    className='h-100',
                ),
                width=6,
            )
        ])
    ],
)

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

img1
img1917×367 93.5 KB

mred dbc layout

2 Likes
4

Nice example of the new dbc.Stack component available in dash-bootstrap-components >=1.3.0 :tada:

5

idk but thanks for the nice example of card stylings