How to make a custom f7-card widget fully clickable?

Setup, Configuration and Use Widgets
1

Hi all :waving_hand:

I’m building a custom MainUI widget based on f7-card, and I want the entire card area to be clickable, not just a button or icon inside it.

My goal:

  • Clicking anywhere on the card should send a command to an item
  • The card still contains labels, icons, and dynamic background styling
  • No “dead zones” where clicks are ignored

I currently try to achieve this by placing an oh-link inside the card and stretching it over the full size using absolute positioning and a high z-index.

Here is a simplified version of my widget YAML:

component: f7-card
config:
  style:
    position: relative
    border-radius: var(--f7-card-expandable-border-radius)
    aspect-ratio: 2 / 1
    margin: 0.5rem
    width: calc(100% - 1rem)

slots:
  content:
    - component: oh-link
      config:
        action: command
        actionItem: =props.controlitem
        actionCommand: =({props.commandOn:props.commandOff})[@@props.controlitem] || props.commandOn
        style:
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          z-index: 1
          background: transparent
          cursor: pointer

    - component: f7-block
      config:
        style:
          position: relative
          z-index: 2
          display: flex
          align-items: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon

    - component: f7-block
      config:
        style:
          position: relative
          z-index: 2
          display: flex
          justify-content: center
          align-items: center
      slots:
        default:
          - component: Label
            config:
              text: =props.header

This mostly works, but I’m not sure if this is the recommended or cleanest approach.
Sometimes I run into click issues or layering problems when adding more content.

My questions:

  1. Is using a full-size oh-link overlay the correct pattern?
  2. Is there a better way to make an entire widget/card clickable in MainUI?
  3. Are there any gotchas with z-index, pointer-events, or Framework7 cards?

Any advice or best practices would be greatly appreciated :folded_hands:
Thanks!

2

You will never accomplish this with an f7-card because the f7 components cannot interact with OH entities. In order to send a command to an Item, you must use an oh- component.

That said there is an oh-card that functions in most ways like an f7-card and does have access to the OH actions which allow for sending commands to an Item.

The content area of the oh-card is fully clickable and triggers the action without any additional configuration. The only restriction is that it is only the content area. If your card has a header or a footer then that area will not be clickable. The example configuration you have posted doesn’t seem to have a header or a footer so you can just replace the f7-card with oh-card, add your action to the card’s config, and delete the oh-link.

If you want to have a card with a header and a footer and have the entire thing be clickable, then yes you need to do something like what you have here with a button or a link that covers the full area of the card.