Card style not updated when hash changes

alex3305 commented 1 year ago

My Home Assistant version: 2022.11.5

My lovelace configuration method (GUI or yaml): GUI

What I am doing: I'm creating an tabbed view with state-switch's hashes.

What I expected to happen: When the hash changes, the style gets invalidated and redrawn

What happened instead: When the hash changes, nothing happens. Except for when I refresh the page.

Minimal steps to reproduce:

show_name: true
show_icon: true
type: button
tap_action:
  action: navigate
  navigation_path: '#climate'
entity: light.office
card_mod:
  style: |
    ha-card {
      background-color: {{ iif(hash == 'climate', 'red', 'green') }};
    }

Error messages from the browser console: None

By putting an X in the boxes ([]) below, I indicate that I:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Clooos commented 1 year ago

Hi! I have this issue too, this is only working when I refresh the page. Thank you in advance for your help @thomasloven, this could be a really helpful feature.

card_mod:
  style: |
    ha-card {
      {% if hash == 'test' %}
        height: 100px !important;
      {% else %}
        height: 50px !important;
      {% endif %}  
    }

nununo commented 7 months ago

Hi, I also have this issue. It updates correctly when the state changes from standby to on but it doesn't do anything when it changes from on to standby. Only when I refresh the page.

    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {%- set sensor = states('sensor.t4_corredor_termoacumulador_state') %}
          {%- if sensor == 'on' %}var(--state-light-on-color)
          {%- elif sensor == 'standby' %}var(--state-humidifier-on-color)
          {%- else %}var(--state-light-off-color)
          {%- endif %}
          }

Any idea why?

Thanks!

ildar170975 commented 7 months ago

@nununo Your case in unrelated to the issue, no hash in your code.

nununo commented 7 months ago

Hum... I thought hash was just another variable. Sorry for the confusion, then.

ildar170975 commented 7 months ago

I thought hash was just another variable.

It is a variable. But your case is different.

Suggest to ask here: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744 Could be different reasons: -- not 100% correct template - paste your WHOLE code into dev tools -> template and see what happens; -- the --card-mod-icon-color may not work stable for your particular card. Let's continue this discussion in that thread when you post there.

thomasloven / lovelace-card-mod

Card style not updated when hash changes #238