From f23bdcffb141ccf029a2ba5b6c92537d6536d138 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Thu, 7 May 2020 22:01:15 +0200 Subject: [PATCH] fix for value widget: more elegant solution for display issues #192 --- src/styles/widgets.css | 2 +- src/widget/widgets/value.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 5d92aa8..3d3455d 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -249,7 +249,7 @@ span.signal-unit::after { width: 100%; height: 100%; display: flex; - flex: none; + justify-content: center; word-wrap: break-word; } diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js index 8951d80..f143cd0 100644 --- a/src/widget/widgets/value.js +++ b/src/widget/widgets/value.js @@ -69,14 +69,14 @@ class WidgetValue extends Component { render() { let value_to_render = Number(this.state.value); - let value_width = this.props.widget.customProperties.textSize*0.55* (this.state.value.length +2); - let unit_width = this.props.widget.customProperties.textSize*2; + let value_width = this.props.widget.customProperties.textSize*(value_to_render < 1000 ? (2):(3)); + let unit_width = this.props.widget.customProperties.textSize*(this.state.unit.length + 0.7); return (
- {this.props.widget.name} - {Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)} + {this.props.widget.name} + {Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)} {this.props.widget.customProperties.showUnit && - [{this.state.unit}] + [{this.state.unit}] }
);