Card is not aligning correctly with Plotly graph as it pulls down below

Dash Python
1

The card is not aligning on the top with the Plotly graph object, it is being pulled down a little below the plotly graph object.

Can anyone please me with this issue ?

plotly card misalignment
plotly card misalignment555×594 16 KB

2

Hi @Prayag
Welcome to the community and thank you for the question.

Can you please share the code of your layout section of the app.

3

Hello @adamschroeder,

Please refer to my layout code for the app,

tab_1_layout = html.Div([html.Div([dcc.RadioItems(

        id='Type-proj-acc',

        options=[{'label': i, 'value': i} for i in ['Projects','Accounts']],

        value='Projects',labelStyle=lab_style)

        ],style={'width': '49%', 'display': 'inline-block','margin-bottom':'5px'}),

        html.Div([dcc.RadioItems(

        id='Scan-Category',

        options=[{'label': i, 'value': i} for i in Scan_types],

        value='Overall',labelStyle=lab_style)

        ],style={'width': '49%', 'display': 'inline-block','margin-bottom':'5px'})

        ,html.Div([card1,card2],

                      style={'width': 100,'display': 'inline-block','height':280,'margin-left':'10px','margin-top':0})

        ,html.Div([  

            dcc.Graph(

            id='piechart-scan')],

                 style={'width': 300, 'display': 'inline-block','height':280})

With this code, I have provided also provided a callback for the pie chart which changes through the radio button id = Type-proj-acc…!

4

Hi @Prayag
I prefer using dash bootstrap for the styling as well. I was able to recreated a layout very similar to your:

image
image1920×1080 71.4 KB 

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
import plotly.express as px

df = px.data.tips()
fig = px.pie(df, values='tip', names='day')


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

radio_items_card = dbc.Card(
    [
        dbc.CardBody(
            [
                dcc.RadioItems(
                    id='Type-proj-acc',
                    options=[{'label': i, 'value': i} for i in ['Projects', 'Accounts']],
                    value='Projects')
            ]
        ),
    ]
)

projects_card = dbc.Card(
    [
        dbc.CardBody(
            [
                html.H4("# Projects", className="card-title"),
            ]
        ),
    ],
    color="secondary"
)

accounts_card = dbc.Card(
    [
        dbc.CardBody(
            [
                html.H4("# Accounts", className="card-title"),
            ]
        ),
    ],
    color="secondary"
)

graph_card = dbc.Card(
    [
        dbc.CardBody(
            [
                html.H4("% of Projects - Scan Category", className="card-title"),
                dcc.Graph(id='piechart-scan', figure=fig)
            ]
        )
    ],
    color="secondary"
)

app.layout = dbc.Container([

    dbc.Row([
        dbc.Col([radio_items_card], width=4, className='mb-5')
    ]),

    dbc.Row([

        dbc.Col([
            dbc.Row([
                dbc.Col([projects_card], className='mb-5')
            ]),
            dbc.Row([
                dbc.Col([accounts_card])
            ])
        ], width=3),

        dbc.Col([graph_card], width=8)
    ])
    
])


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

Thanks a ton @adamschroeder, is there any other way by which I can incorporate this cards aligning with the plots without using the dash bootstrap for styling.

The reason for asking is, that I need to convert the entire lengthy dashboard code to bootstrap styling for this small change…!

6

Hi @Prayag
yes, it should definitely be possible with CSS, similar to what you’re doing. I know some CSS, so if I can get this to work ,I’ll post it here.

7

@adamschroeder thanks for the update, any luck in getting this done through CSS…?