Card-mod issue when in conditional card

Configuration Frontend
1

Hi,

I put on a picture-elements card exact the same state-icon twice, except only the first one within a conditional card.

When switch.smart_plug_luchtbevochtiger_on_off is off :

image
image440×245 60.6 KB

When switch.smart_plug_luchtbevochtiger_on_off is on :

image
image442×245 61 KB

Only the second state-icon works fine as expected.

Any idea ?

type: picture-elements
elements:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.toggle_verwittigen_vullen_watertank_luchtbevochtiger
        state: "on"
    elements:
      - type: state-icon
        style:
          top: 71%
          left: 84%
        entity: switch.smart_plug_luchtbevochtiger_on_off
        icon: mdi:cup-water
        tap_action:
          action: toggle
        hold_action:
          action: perform-action
          target: {}
          perform_action: script.teller_watertank_luchtbevochtiger_initialiseren
        card_mod:
          style:
            state-badge:
              $:
                ha-state-icon:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% if is_state('switch.smart_plug_luchtbevochtiger_on_off', 'on') %}
                            color: yellow;
                          {% else %}
                            color: white;
                          {% endif %}
                        }
  - type: state-icon
    style:
      top: 82%
      left: 84%
    entity: switch.smart_plug_luchtbevochtiger_on_off
    icon: mdi:cup-water
    tap_action:
      action: toggle
    hold_action:
      action: perform-action
      target: {}
      perform_action: script.teller_watertank_luchtbevochtiger_initialiseren
    card_mod:
      style:
        state-badge:
          $:
            ha-state-icon:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% if is_state('switch.smart_plug_luchtbevochtiger_on_off', 'on') %}
                        color: yellow;
                      {% else %}
                        color: white;
                      {% endif %}
                    }
image: /local/images/floorplan/downstairs/a downstairs floorplan.png
2

You need to define card-mod on a conditional element level, not inside it.
It is all covered here: main card-mod thread - 1st post - fantastic link - picture-elements - conditional.
Suggest to ask questions in the main card-mod thread instead of creating own ones.

3

Have you a link for that ?

Meanwhile could you tell me what changes I have to do…

4

The link.

5

I intentionally do not give a link, otherwise you will miss the whole list of examples.

1 Like
6

My bad, I provided it :grinning:

1 Like