Using multiple conditional cards - only first one shown

Hi,

Cannot seem to get this working. Following code seems to work only for the first conditional card, but if the conditions do not match with the first card, then the second card never seem to be shown - even though conditions match. Tried debugging this so that just changed the order of the conditional cards and it was reproducible: The first conditional card only worked. Could you help me to see where is the problem? Thanks!

- badges: []
    panel: true
    title: 3D floor
    cards:
      - type: conditional
        conditions:
          - entity: light.jalkalamppu
            state: 'off'
        card:
          type: picture-elements
          image: /local/floorplan/3d_kuvat/alakerta_3d_iso.png
          elements:
            - entity: light.wc
              hold_action: none
              state_image:
                'off': /local/floorplan/3d_kuvat/alakerta_3d_iso_wc.png
                'on': /local/floorplan/3d_kuvat/alakerta_3d_iso_wc.png
              style:
                left: 50.15%
                top: 49.15%
                width: 100%
              tap_action: none
              type: image
      - type: conditional
        conditions:
          - entity: light.jalkalamppu
            state: 'on'
        card:
          type: picture-elements
          image: /local/floorplan/3d_kuvat/alakerta_3d_iso.png
          elements:
            - entity: light.wc
              hold_action: none
              state_image:
                'off': /local/floorplan/3d_kuvat/transparent_120x90.png
                'on': /local/floorplan/3d_kuvat/alakerta_3d_iso_wc.png
              style:
                left: 50.15%
                top: 49.15%
                width: 100%
              tap_action: none
              type: image
            - entity: light.wc
              image: /local/floorplan/3d_kuvat/transparent_120x90.png
              style:
                left: 61%
                top: 51%
                width: 5%
              tap_action:
                action: toggle
              type: image

Don’t mind the actual functionality, I know, it does not make any sense. I used this just for debugging.

Edit.
Somehow it seems that the first conditions restricts also the second card, because the second card is not shown even though I change it into “plain” picture-element and the first condition is not fulfilled. So it seems to work like IF-ELSE instead of IF-ELSEIF. No, cannot figure this out. I hope someone can point the bug to me…

Maybe try it with the state_not in the second conditional.
Or even better, use the state-switch.

state_not did not change the functionality (changed the value too). State-switch might not be suitable, because my goal is to have several conditions for one card, not just one like in my debug code above. For some reason the second card is not executed at all if the conditions of the first card are not fulfilled.

This is because you are using it in a panel view. When having panel: true you can only show a single card (unless you put them inside a stack, e.g. vertical or horizontal-stack).

Either remove panel:true or create a stack and put the conditional cards inside the stack. Let me know if it helped.

E.g.

title: example
path: example
panel: true
cards:
  - type: vertical-stack
    cards:
      - conditional-card 1
      - conditional-card 2

Or just remove panel: true and leave your current code as is.

Edit: added info from HA documentation:

Panel Mode
This renders the first card on full width, other cards in this view will not be rendered. Good for cards like map, stack or picture-elements.
2 Likes

Oh yes! Thank you! I’ll let you know how it works with a stack.

It works with a stack, but no perfectly. The second card is now shown, but stack divider is now seen in top of the picture (vertical stack used) if the second card is shown. Because of this the picture moves up and down a bit when the conditions change. Is there way to remove the stack divider (or what is is called, frame?) so that the picture wouldn’t move at all?

I must have panel: true so that the picture is shown in full width.

Edit.
My other option is to just have one picture-elements card and define new entities for representing each condition (statuses of multiple entities). This actually would make the yaml shorter, but I’m not too keen on creating such “helper” entities.