OH3 Widget f7-col with oh-icon and Label Alignment

Setup, Configuration and Use Beginners
, ,
1
  • Platform information:
    • Hardware: _amd64
    • OS: Windows 10/10.0
    • Java Runtime Environment: 11.0.9.1 (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:

Alignment
Alignment757×347 26.2 KB

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).

Thanks
Mark

2

Try to use in a style section:

        style:
          position: absolute
          top: 0px
          left: 0px
3

Thanks, I actually eventually got it to work 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
                          style:
                            position: absolute
                      - component: Label
                        config:
                          text: =(items[props.upsBatteryLevel].state)
                          style:
                            font-size: 20px
                            font-weight: 500
                            line-height: 35px
                            text-align: right
                            white-space: nowrap