Cannot get f7-list-item-cell within the row element

Setup, Configuration and Use Widgets
, , ,
1

Hi,

I’m using code from this topic.

I’m developing a f7-list-item widget which I want to add to a oh-list-card. I cannot seem to get the f7-list-item-row to nest within the f7-list-item. The docs of f7 don’t explain how to use f7-list-item-row.

From what I’ve researched I need to add f7-list-item-row to the content slot of f7-list-item, but that doesn’t seem to work properly. Adding f7-list-item-row to the default slot doesn’t render it at all.

My widget:

uid: tado_room_list_item_v2
tags: []
props:
  parameters:
    - description: Room name
      label: Room name
      name: roomName
      required: true
      type: TEXT
    - context: item
      description: Temperature item
      label: Temperature item
      name: itemTemperature
      required: true
      type: TEXT
    - context: item
      description: Humidity item
      label: Humidity item
      name: itemHumidity
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 12, 2023, 10:31:51 AM
component: f7-list-item
config:
  style:
    box-shadow: none
    margin-left: 0
    margin-right: 0
slots:
  content:
    - component: f7-list-item-row
      config: {}
      slots:
        default:
          - component: f7-list-item-cell
            config:
              style:
                text-align: left
                width: 10%
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: f7:lightbulb
                    width: 20
          - component: f7-list-item-cell
            config:
              style:
                text-align: left
                width: 40%
            slots:
              default:
                - component: Label
                  config:
                    text: =props.roomName
          - component: f7-list-item-cell
            config:
              style:
                text-align: right
                color: var(--f7-list-item-after-text-color)
                width: 25%
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.itemHumidity].displayState || items[props.itemHumidity].state
          - component: f7-list-item-cell
            config:
              style:
                text-align: right
                color: var(--f7-list-item-after-text-color)
                width: 25%
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.itemTemperature].displayState || items[props.itemTemperature].state

The problem, the row should be nested in item-inner.
image

Any help is much appriciated!~

Regards,
Bastiaan

2

Well finally found it myself. Need to add it to the inner-start slot and not the content slot.

Final widget (used row/column to have more control over the width)

uid: tado_room_list_item_v2
tags: []
props:
  parameters:
    - description: Room name
      label: Room name
      name: roomName
      required: true
      type: TEXT
    - context: item
      description: Temperature item
      label: Temperature item
      name: itemTemperature
      required: true
      type: TEXT
    - context: item
      description: Humidity item
      label: Humidity item
      name: itemHumidity
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 12, 2023, 10:31:51 AM
component: f7-list-item
config:
  style:
    box-shadow: none
    margin-left: 0
    margin-right: 0
  stylesheet: >
    .item-inner {
      display: inline-block;
    }
slots:
  inner-start:
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-col
            config:
              style:
                text-align: left
              width: 10
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: f7:lightbulb
                    width: 20
          - component: f7-col
            config:
              style:
                text-align: left
              width: 40
            slots:
              default:
                - component: Label
                  config:
                    text: =props.roomName
          - component: f7-col
            config:
              style:
                text-align: right
                color: var(--f7-list-item-after-text-color)
              width: 25
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.itemHumidity].displayState || items[props.itemHumidity].state
          - component: f7-col
            config:
              style:
                text-align: right
                color: var(--f7-list-item-after-text-color)
              width: 25
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.itemTemperature].displayState || items[props.itemTemperature].state