OH3 widget Styling question

Hi,

quick question, how can i best align an f7 icon below an state item in a widget within one row? The orange fill circle should be positioned and stay below the 21 even if the widget is dynamic in size.

image

i tried with z-index: -1 / 1 but this does not work within the row. Also tried with Absolute but this does not satisfy with a dynamic sizing widget.

- component: f7-row
  config: {}
  slots:
    default:
      - component: f7-icon
        config:
          f7: circle_fill
          size: 28
          style:
            margin-left: 191px
            color: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"'
            position: absolute
            z-index: -1
      - component: Label
        config:
          text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0) + '°'
          style:
            font-size: 13px
            line-height: 1
            font-weight: 500
            margin-left: 0px
            margin-bottom: 0px
            margin-top: 5px
            color: white
            z-index: 1

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