Plotly Dash DAQ LED Display center in dbc collumn

Dash Python
1

I am sure it is something simple i am missing but how do i center a dash daq led display in a column. no matter what i do the H4 heading and the dash daq led display are not aligned in the column

this is what i have tried

dbc.Row([
        dbc.Col([
            html.H4('Line Speed', className='text-center'),
            daq.Gauge(
                      id='line_speed_gauge',
                      showCurrentValue=True,
                      color={"gradient": True, "ranges": {"red": [0, 50],
                                                          "yellow": [50, 125],
                                                          "green": [125, 175],
                                                          '#ffff00': [175, 250],
                                                          '#ff0000': [250, 300]}},
                      label=" ",
                      value=.1,
                      min=0,
                      max=300),
            dcc.Interval(id='interval 1 second', interval=1000, n_intervals=0)
        ]),
        dbc.Col([
            dbc.Row([
                html.H4('Downtime in minutes', className='text-center'),
                ]),
            dbc.Row([
                daq.LEDDisplay(
                        id='downtime_led_display',
                        size=64,
                        value=0)
                ],
                  justify="center"),
        ]),
    ]),
2

Hi @z28z34man
It looks like there is some css in the daq.LEDDisplay component that is interfering with your attempts at centering the component. You could try to wrap it in a html.Div and apply the “text-center” class like this:

dbc.Row(
    [
        html.Div(
            daq.LEDDisplay(id="downtime_led_display", size=64, value=0),
            className="text-center",
        )
    ],
),
3

Thank you so much that worked like a charm. I greatly appreciate it.

1 Like