plotly / dash-daq

Control components for Dash
MIT License
141 stars 40 forks source link

daq.Gauge prop 'showCurrentValue' value is misaligned without 'label' property also #123

Closed wbrgss closed 3 years ago

wbrgss commented 3 years ago

Running the "Current Value and Units" section example from the Dash DAQ Gauge chapter and omitting the label property results in a very misaligned current value:

image

With the label argument provided:

image


The current value is centered relative to the viewport instead of the component, I suspect because it's missing the flex rules in the direct child of the outermost .daq-gauge--light container (applied to a hashed styled-components class, but also using the daq-gauge--light__label class). This .daq-gauge--light__label, <div> container is missing its class attributes when there is no label prop provided to daq.Gauge (although the <div> element itself is there either way).

It makes sense to have use cases that display the currentValue property without the label property.

Minimal example:

import dash
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Gauge(
        showCurrentValue=True,
        # label="Default", # uncomment to have normal "currentValue" alignment
        value=6
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
Chambana commented 3 years ago

Still broken as of 1.21.

Temporary workaround is to add a label string containing a single space in it (e.g. " ") to each gauge