Maintain uniform height in a cardgroup cards

Dash Python
1

Hi,

I have the following code to generate a row of cards in a card group:

def card_content(title, text, icon):
    return dbc.Col(
        [
            dbc.Card(
                [
                    dbc.CardHeader(title.capitalize()),
                    dbc.CardBody(
                        [
                            html.P(text, className="card-text"),
                            dbc.Button(class_name=icon, id=f"{title.lower()}-btn"),
                        ]
                    )
                ],
            ),
        ],
        width=2,
    )

def layout():
    return dbc.Container(
        [
            dbc.Row(
                [
                    dbc.CardGroup(
                        [
                            card_content("settings",
                                         "Adjust app wide preferences",
                                         icon_settings
                                        ),
                            card_content("Load Workspace",
                                         "Import existing workspace into the dashboard",
                                         icon_import
                                        ),
                        ],
                    ),
                ],
                id="home-tab-row",
                align='center',
                justify='start',
                class_name='g-1',
            ),
        ],
        id="home-tab-container",
        fluid=True,
    )

However, the card header and the card box height don’t all align across the cards.

image

How can I get all the cards to have same height and width?
With cardgroup or otherwise.

Thank you.
Baadal

2

Hello baadal

Take a look at this code if resolve your problem:

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc

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

def card_content(title, text, icon):
    return dbc.Col(
        [
            dbc.Card(
                [
                    dbc.CardHeader(title.capitalize()),                    
                    dbc.CardBody(
                            [
                                html.H4(html.B("card title"), className="card-title"),
                                dbc.Button(class_name=icon, id=f"{title.lower()}-btn"),
                            ]
                        ),
                ],
            ),
        ],
        width=2,
    )

def layout():
    return dbc.Container(
        [
            dbc.Row(
                [
                    dbc.CardGroup(
                        [
                            card_content("settings",
                                         "Adjust app wide preferences",
                                         button_special_style
                                        ),
                            card_content("Load Workspace",
                                         "Import existing workspace into the dashboard",
                                         button_special_style
                                        ),
                        ],
                    ),
                ],
                id="home-tab-row",
                align='center',
                justify='start',
                class_name='g-1',
            ),
        ],
        id="home-tab-container",
        fluid=True,
    )

button_special_style = {'font-family':'‘copperplate', 'font-size':'20px'}

app.layout = layout()


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

image
image754×268 6.38 KB

2 Likes
3

Thank you @SamuelVT for the solution.

I think they are lining up in your run since the texts are identical in both the cards.
If I go back to providing the original different length text, the problem can be seen.

image

Regards,
baadal

4

Hello baadal

I recommend you this links:

This example is for desktop.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc

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

first_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5("Card title", className="card-title"),
            html.P("This card has some text content, but not much else"),
            dbc.Button("Go somewhere", color="primary"),
        ]
    )
)


second_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5("Card title", className="card-title"),
            html.P(
                "This card also has some text content and not much else, but "
                "it is twice as wide as the first card."
            ),
            dbc.Button("Go somewhere", color="primary"),
        ]
    )
)


cards = dbc.Row(
    [
        dbc.Col(first_card, width=4),
        dbc.Col(second_card, width=8),
    ]
)


def layout():
    return dbc.Container(
        [
            cards,
        ],

    )

app.layout = layout()


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

image
image1327×148 6.23 KB