Strange interaction with picture elements and vertical stack in card with explicit card_mod keyword.

Gieraffe90 commented 6 months ago

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing:

with version 3.4.0 I had to change my configuration to use card_mod explicitly in yaml. In some cases with picture-elements and vertical-stack-in-card this causes styling issues. I'm not an expert in this area, maybe this is intentional and a problem with either picture-elements or the vertical-stack-in-card implementation. But it started with this change in card_mod.

In this example, I want to change the background of a custom:vertical-stack-in-card element within a picture-elements card.

The following examples can be reproduced using card-mod 3.3.1!

What I expected to happen:

Same result as with the old configuration (without explicit card_mod), only the "ha-card" element, where I specified the background, is changed. In this case, only the background of the "vertical-stack-in-card" element is changed.

type: picture-elements
elements:
  - type: custom:vertical-stack-in-card
    style:
      top: 32%
      left: 40%
      style: |
        ha-card {
          background-color: violet;
        }
    cards:
      - type: entity
        entity: sensor.disk_use_percent_config
        style:
          top: 32%
          left: 40%
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0,0,0,0);
            }
image: https://demo.home-assistant.io/stub_config/floorplan.png

What happened instead:

With explicit card_mod in the config, the card_mod element is for some reason placed one level above the current element where it was added and also modifies the ha-card element above it (picture-elements). In this case, the background of the vertical-stack-in-card and the background of the picture-elements are changed.

type: picture-elements
elements:
  - type: custom:vertical-stack-in-card
    style:
      top: 32%
      left: 40%
    card_mod:
      style: |
        ha-card {
          background-color: violet;
        }
    cards:
      - type: entity
        entity: sensor.disk_use_percent_config
        style:
          top: 32%
          left: 40%
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0,0,0,0);
            }
image: https://demo.home-assistant.io/stub_config/floorplan.png

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.

Gieraffe90 commented 6 months ago

Wow, I just checked it again on a different device (tablet) and it seems that this behavior has been fixed with version 3.4.1 (and updating the cache).

thomasloven commented 6 months ago

This part is really strange

    style:
      top: 32%
      left: 40%
      style: |
        ha-card {
          background-color: violet;
        }

and actually part of why card mod now requires card_mod: first; because it collides with picture-elements which uses the style keyword.

Glad to hear it works in 3.4.1. I'm closing this then.

thomasloven / lovelace-card-mod

Strange interaction with picture elements and vertical stack in card with explicit card_mod keyword. #341