- Platform information:
- Hardware: _amd64
- OS: Windows 10/10.0
- Java Runtime Environment: 18.104.22.168 (Zulu11.43+55-CA)
- openHAB version: openHAB 3.1.0.M5
Hi All the YAML gurus.
I have customized a Widget and added the Battery Level Status as per the image below, however I can not work out how to move the alignment of the icon and label to look better and fit better:
I would like to move the icon and the text more to the left as per the arrows above:
This section of YAML is as follows:
- component: f7-col config: width: 20 slots: default: - component: oh-icon config: icon: '=(items[props.upsBatteryLevel].state === "Charging") ? "charge_battery" : (items[props.upsBatteryLevel].state === "Idle") ? "full_battery" : (items[props.upsBatteryLevel].state === "Running") ? "middle_battery" : (items[props.upsBatteryLevel].state === "Critical") ? "empty_battery" : "error"' width: 40 class: - margin-horizontal - float-left - component: Label config: text: =(items[props.upsBatteryLevel].state) style: font-size: 20px font-weight: 500 line-height: 35px text-align: left white-space: nowrap
In case it is required the full YAML is as follows:
YAML.txt (5.4 KB)
Any suggestions on how I can improve the alignment? (Was quite a challenge to just get the icon and label in the same line).