OH Label Cell - Header Title and Label

Hi!

The Title and Header fields appear to overlap when using a Label Cell.

The Title field takes precedence over the Header field; in other words, if both are configured, the Title field appears while the Header does not.

I also noticed that when clicking on a Label Cell, only the Title, Subtitle, and Footer fields appear.

The Label or Item field is never displayed.

First Label Cell

component: oh-label-cell
config:
  icon: oh:temperature
  title: Title
  subtitle: subtitle
  footer: footer
  item: Local_Weather_and_Forecast_One_Call_API_Current_Temperature

Second Label Cell

component: oh-label-cell
config:
  icon: oh:temperature
  subtitle: subtitle
  footer: footer
  header: Header
  item: Local_Weather_and_Forecast_One_Call_API_Current_Temperature

When first Label Cell is clicked:

The Label or Item field is never displayed.

This is all working as originally designed. There’s a lot of logic behind deciding what gets displayed in the title of the cell and it has been that way from the beginning of MainUI. As for the expanded contents, that is also intentional and derives from the logic behind the cards from the f7 library that this is all based off of. The expanded card is really intended for additional components and interaction. If you want the item label displayed in both you can easily add that, but in many instances that would be unnecessary duplication.

The duplication is more apparent when using the interface on a larger screen, but on mobile devices—where screens are smaller—I imagined that zooming in would display the information more clearly.

In my opinion, showing at least the Label or the Item would be useful.

Thank you very much for the clarification.

@JustinG

How can I add the item label in the expanded card?

Thank you again for your help.

Anything added to the default slot of the cell will be part of the expanded contents. So, there a many options for displaying the state of an item, but at its most basic it would look like this:

component: oh-label-cell
config:
  title: Some Title Here
  item: YourItem
slots:
  default:
    - component: Label
      config:
        text: = items.YourItem.state

Thank you JustinG!

This is what I’m looking for.

Expanded

YAML

component: oh-label-cell
config:
  width: "100"
  small: "50"
  icon: oh:energy
  title: "='UPS Input: ' + items.SMS_UPS_acNow.state"
  subtitle: "='UPS output: ' + items.SMS_UPS_acOut.state"
  footer: "='UPS Battery: ' + items.SMS_UPS_batLevel.state"
  label: "='UPS Load: ' + items.SMS_UPS_powerNow.state"
slots:
  default:
    - component: Label
      config:
        text: -----------------------------------------
    - component: Label
      config:
        text: "='UPS Temperature: ' + items.SMS_UPS_tempC.state"
    - component: Label
      config:
        text: "='UPS Load: ' + items.SMS_UPS_powerNow.state"
    - component: Label
      config:
        text: "='UPS On Battery: ' + items.SMS_UPS_onBattery.state"
    - component: Label
      config:
        text: "='UPS On Test: ' + items.SMS_UPS_testActive.state"
  background:
    - component: oh-image
      config:
        url: /static/WP-01.jpg
        style:
          width: 100%
          height: 100%
          object-fit: cover