I’m trying to extend the base oh-cell component into custom widget, where I would like to have two separate item states with two different actions configurable for each item.
I had something similar created in past, but it was based on f7-card and tried to pretend it was a regular cell. But my css styling was not perfect so it never looked like I wanted on different mobile/desktop browsers.
So I’m now trying to rewrite this widget to be based on oh-cell. I’ve been able to create a widget, but when I tried to test it I found out that the oh-buttons used for actions doesn’t work. It seems like one of cell’s components is preventing the click events to reach the button elements. I tried to fiddle with the z-axis, but nothing helps. When I try to change the base component from oh-cell to f7-card then the button works normally.
Here is very simple example of what I’m trying (for simplicity I removed other components and only left one button):
uid: test-oh-cell-with-button
tags: []
props:
parameters:
- context: item
description: A temperature item
label: Temperature Item
name: temp_item
required: false
type: TEXT
groupName: tempAction
parameterGroups:
- name: tempAction
context: action
label: Temperature
timestamp: Feb 13, 2025, 9:54:41 PM
component: oh-cell
config:
trendItem: =props.temp_item
slots:
header:
- component: oh-button
config:
actionPropsParameterGroup: tempAction
style:
background: lightgrey
text: =@props.temp_item
Does anybody know what to do so the button works normally in the cell body?
I wanted to retain the trend line behaviour of the oh-cell.
If buttons in header slot will not work, I could try with background slot + adding my own oh-trend functionality.
I tried to move the content to background slot and added oh-trend and now buttons works properly.
But the styling is completely different:
But I think I could solve the styling problem much easier than the not-working buttons. Will give it a try tomorrow. Thanks for the tip with background slot.
