Help: subtitle Not Displaying in oh-list-item Component

Setup, Configuration and Use Widgets
1

Hi everyone,

I’m working with an oh-list-item inside an f7-popup component, and I’m having trouble getting the subtitle to display. Here’s a snippet of the code structure I’m using:

- component: f7-popup
  config:
    class: =`popup-${const.widgetID}`
  slots:
    default:
      - component: f7-page
        config: {}
        slots:
          default:
            - component: oh-list
              config: {}
              slots:
                default:
                  - component: oh-list-item
                    config:
                      after: =@props.CPULoadItem
                      icon: =props.SystemOHIcon
                      style:
                        --f7-list-item-after-font-size: 16px
                        --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
                      subtitle: hhhh
                      title: =props.SystemOHTitle

I expected the subtitle (“hhhh”) to display beneath the title, but it isn’t showing up in the UI. The title and after fields are displaying correctly, so I’m not sure what might be causing the subtitle to be hidden or ignored.

Bildschirmfoto vom 2024-11-02 16-49-09
Bildschirmfoto vom 2024-11-02 16-49-091246×135 2.52 KB

Things I’ve Tried:

  • Ensuring that the subtitle is defined directly as a string.
  • Checking if any additional CSS might be affecting the subtitle visibility.

Questions:

  1. Is there anything specific required to make the subtitle visible in oh-list-item?
  2. Could there be an issue with my setup of f7-popup or oh-list?

Any advice or troubleshooting tips would be greatly appreciated! Thank you!

2

Add mediaList: true to the config of the oh-list.