Controlling dbc.Col position

Dash Python
1

Hello,

I am working on a Dash application, and the card under the table I want to place it under the two other cards, I tried a lot but it can’t and I don’t know where is the problem, you can check the code and the picture that I have shared, if you have any suggestions please share them with me!

Thanks,

dbc.Row([
           dbc.Col(
                    dbc.Card(
                        [
                            dbc.CardBody(
                                [
                                    dcc.Location(id='pathname-3', refresh=True),
                                    html.Div(id='table_2'),
                                ]
                            ),
                        ],
                        className="card wrapper",
                        style={"height":"auto", "box-shadow": "2px 2px 5px #dbdbdb", "margin-top":"10px"}
                    ),width={"size":6}
                ),

        dbc.Col(
            [
            dbc.Col(id="tot-new-presta")
            ],width={"size": 3}
        ),

       dbc.Col([
           dbc.Col(id="tot-presta"),  # Carte 2
       ], width={"size": 3}),

       dbc.Col([
           dbc.Col(id="tot-mt-engage"),  # Carte 2
       ], width={"size": 6})
     ])

Inkeddbc.Col
Inkeddbc.Col1450×601 109 KB

2

Hi @jowairya

When working with a more complex layout, I find it helpful to break it down into simpler components and then adding them to the layout using a variable name.

For example:



card_group = html.Div(
    [

        dbc.Row(
            [
                dbc.Col(dbc.Card("One of two columns")),
                dbc.Col(dbc.Card("One of two columns")),
            ]
        ),
        dbc.Row(dbc.Col(dbc.Card("A single column"))),
    ]
)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(dbc.Card("This is the table")),
                dbc.Col(card_group)
            ]
        )

    ],
    fluid=True,
)
5 Likes
3

Thank you very much @AnnMarieW, now it works for me!

1 Like