✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

daq.Gauge not aligned correctly in dbc.Card

Hey! I’m trying to use a Gauge inside a Card, like this:

dbc.Card(className="mt-3", children=[
        dbc.CardHeader(html.H6("Last observed current")),
        dbc.CardBody([
            daq.Gauge(
                showCurrentValue=True,
                units="A",
                value=50,
                max=100,
                min=0,
            )
        ]),
    ]),

However, only the current value and the units are aligned to the center of the card - the rest of the visual is aligned to the left:

Anyone knows a fix for this?

Hey @dmhv

One option would be to set display:flex on the card body, and wrap the Gauge in a div with auto sized margins. Here’s an example using Bootstrap’s d-flex and m-auto utility classes for convenience.

dbc.Card(
    className="mt-3",
    children=[
        dbc.CardHeader(html.H6("Last observed current")),
        dbc.CardBody(
            [
                html.Div(
                    daq.Gauge(
                        showCurrentValue=True, units="A", value=50, max=100, min=0,
                    ),
                    className="m-auto",
                )
            ],
            className="d-flex",
        ),
    ],
)

Running that I see this:

1 Like

Amazing! Thanks a lot @tcbegley :sunny:

1 Like