Widget not drawing/rendering correctly when shown shown in "Edit Item Metadata: widget"

After watching Yannick in the Virtual Meetup I got excited to change my widget to be easier to setup. I experienced different renderings of the widget.


Develop Widget


Selected as standalone widget its is not grouping in rows.


Looking good here


Home page looks good.

Have I made a mistake?

here is the yaml

uid: Sensibo_ACcontroller_test
tags: []
props:
  parameters:
    - description: The Label at the top of the card
      label: Friendly name of your aircon eg. Lounge
      name: title
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 6, 2020, 3:05:47 AM
component: f7-block
config:
  style:
    --f7-button-text-color: var(--f7-text-color)
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
  class:
    - no-padding
slots:
  default:
    - component: Label
      config:
        class:
          - margin
          - no-padding
        text: =props.title
        style:
          text-align: center
          height: auto
          font-size: 16px
          --f7-button-text-color: var(--f7-text-color)
          --f7-button-bg-color: var(--f7-card-bg-color)
          --f7-theme-color-rgb: var(--f7-color-blue-rgb)
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: toggle
                    actionItem: =(props.item + "_MasterSwitch")
                    actionCommand: ON
                    actionCommandAlt: OFF
                    icon-f7: power
                    iconSize: 28
                    iconColor: '=(items[props.item + "_MasterSwitch"].state === "OFF") ? "red" : "green"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      height: auto
                      font-size: 12px
          - component: f7-col
            config:
              style:
                text-align: right
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.item + "_CurrentTemperature"].state.displayState || items[props.item + "_CurrentTemperature"].state
                    style:
                      white-space: nowrap
                      text-overflow: elipsis
                      heigh: auto
                      font-size: 12px
                - component: Label
                  config:
                    text: =items[props.item + "_CurrentHumidity"].displayState || items[props.item + "_CurrentHumidity"].state
                    style:
                      white-space: nowrap
                      text-overflow: elipsis
                      heigh: auto
                      font-size: 12px
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              min: 18
              max: 30
              stepSize: 1
              size: 270
              item: =[props.item + '_targetTemperature']
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.item + '_mode')
                    actionCommand: ="auto"
                    icon-f7: arrow_2_circlepath
                    iconColor: '=(items[props.item + "_mode"].state === "auto") ? "red" : "gray"'
                    text: AUTO
                    textColor: '=(items[props.item + "_mode"].state === "auto") ? "red" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.item + '_mode')
                    actionCommand: ="heat"
                    icon-f7: thermometer_sun
                    iconColor: '=(items[props.item + "_mode"].state === "heat") ? "orange" : "gray"'
                    text: HEAT
                    textColor: '=(items[props.item + "_mode"].state === "heat") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.item + '_mode')
                    actionCommand: ="dry"
                    icon-f7: drop
                    iconColor: '=(items[props.item + "_mode"].state === "dry") ? "yellow" : "gray"'
                    text: DRY
                    textColor: '=(items[props.item + "_mode"].state === "dry") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.item + '_mode')
                    actionCommand: ="fan"
                    icon-f7: wind
                    iconColor: '=(items[props.item + "_mode"].state === "fan") ? "white" : "gray"'
                    text: FAN
                    textColor: '=(items[props.item + "_mode"].state === "fan") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.item + '_mode')
                    actionCommand: ="cool"
                    icon-f7: thermometer_snowflake
                    iconColor: '=(items[props.item + "_mode"].state === "cool") ? "blue" : "gray"'
                    text: COOL
                    textColor: '=(items[props.item + "_mode"].state === "cool") ? "blue" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: options
                    actionItem: =(props.item + '_fanLevel')
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: chart_bar
                    iconColor: yellow
                    size: 20
                    text: =items[props.item + '_fanLevel'].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      font-size: 12px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: options
                    actionItem: =(props.item + '_swingMode')
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: arrow_up_down_circle
                    iconColor: green
                    size: 20
                    text: =items[props.item + '_swingMode'].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 12px
                      height: auto

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.