Icon in widget does not want to be part of a button

Setup, Configuration and Use Widgets
1

Hi all,

I have made a widget to switch on and off a specific light.
Schermafbeelding 2024-01-15 om 16.04.41

In the developer tool, the whole widget can be ‘pressed’ as a button. However, on a pageview, only the space outside the icon can be pressed as a button. The icon itself is not part of the button anymore or the icon is ‘in front of’ the button…

YAML 
uid: mirrorball-card
tags: []
props:
  parameters:
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Mirrorball on or off
      label: Item
      name: item_mirrorBall
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 28, 2023, 8:37:17 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    width: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        stylesheet: >
          .iconify--bi {
            animation: mymove 4s linear 0s infinite;
          } @keyframes mymove {
            0%     {color: red;}
            12.5%  {color: green;}
            37.5%  {color: blue;}
            62.5%  {color: yellow;}
            87.5%  {color: purple;}
            100% {color: red;}
          }
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:bi:globe
              width: 60
              style:
                margin: auto
                margin-left: 5px
                filter: "='opacity(' + (items[props.item_mirrorBall].state == 'OFF' ? '40' : '100') + '%)'"
                color: "=(items[props.item_mirrorBall].state) == 'OFF' ? 'white !important' : ''"
    - component: oh-button
      config:
        action: toggle
        actionItem: =props.item_mirrorBall
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 120px
          width: 100%

Can someone please give me some advice? Thanks!

2

It’s clearly a z-index issue. It might be worth filing a bug report for this; the two renderings should be the same, but because of how the different pages are constructed it seems that z-index: auto doesn’t get the same results around the oh-icon.

Regardless, there’s an easy fix. You’re f7-block is not necessary, you should just make the icon a direct child of the button and then you won’t have this problem.

3

I can file a bug report but I am on OH3.4 so doubt it if someone will work on the fix.

Your solution works though!

New YAML 
uid: mirrorball-card
tags: []
props:
  parameters:
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Mirrorball on or off
      label: Item
      name: item_mirrorBall
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 15, 2024, 8:12:59 PM
component: f7-card
config:
  stylesheet: >
    .iconify--bi {
      animation: mymove 4s linear 0s infinite;
    } @keyframes mymove {
      0%     {color: red;}
      12.5%  {color: green;}
      37.5%  {color: blue;}
      62.5%  {color: yellow;}
      87.5%  {color: purple;}
      100% {color: red;}
    }
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    width: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: oh-button
      config:
        action: toggle
        actionItem: =props.item_mirrorBall
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 120px
          width: 100%
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:bi:globe
              width: 60
              style:
                margin-top: 30px
                margin-left: 5px
                filter: "='opacity(' + (items[props.item_mirrorBall].state == 'OFF' ? '40' : '100') + '%)'"
                color: "=(items[props.item_mirrorBall].state) == 'OFF' ? 'white !important' : ''"

I must say that, I am very please with the styling. Couldn’t figure out how to make the globe just white when the switch is set to off, as the CSS with the keyframes is already injected. Turns out the property !important does work great!
It was also jumping a little ugly from purple (end) to red (start) of the animation. Now, the globe is already red at the end so you don’t notice where the start/end of the animation is :slight_smile: