Newest version is Messing with css of stacked elements.

[ofekashery]

Newest version is Messing with css of stacked elements.

[Mariusthvdb]

yep, just found out the same thing:

  - type: custom:vertical-stack-in-card
    cards:
      - type: picture
        image: /local/images/nmbs.png
        hold_action:
          action: url
          url_path: https://www.belgiantrain.be/nl
      - type: entities
        style: |
          ha-card {
            --ha-card-background: rgb(0,100,182);
            color: rgb(217,242,251);
          }
        title: Nmbs reizen
        show_header_toggle: false
        entities:
          - sensor.essen_brussel_noord
          - sensor.brussel_noord_essen

          - sensor.nmbs_live
          - sensor.nmbs_live_2
          - sensor.nmbs_live_3
          - sensor.nmbs_live_4

above style config does style the color: but the --ha-card-background won't work. For the sake of experiment I also tried background: and background-color:, and I've also tried a color name ('green') or hex value.

the above config worked up to 0.1.3, the latest updates after that made this happen. It certainly works for the individual entities card when used standalone, so I know the config to be correct.

please have a look for a fix why the vertical-stack-in-card frustrates this?

using the config in a vertical-stack works fine also:

  - type: vertical-stack
    cards:
      - type: picture
        image: /local/images/nmbs.png
        hold_action:
          action: url
          url_path: https://www.belgiantrain.be/nl
      - type: entities
        style: |
          ha-card {
            --ha-card-background: rgb(0,100,182);
            color: rgb(217,242,251);
          }
        title: Nmbs reizen
        show_header_toggle: false
        entities:
          - sensor.essen_brussel_noord
          - sensor.brussel_noord_essen
          - sensor.nmbs_live
          - sensor.nmbs_live_2
          - sensor.nmbs_live_3
          - sensor.nmbs_live_4

thanks

[sirotkaslo]

I'm having this issue too, will there be a fix for this? thank you!

[josh929800]

Same issue for me...

[benct]

Users are reporting the same issue when placing xiaomi-vacuum-card in this card... ref. this issue.

[jacekpaszkowski]

any chance to fix that issue?

[jacekpaszkowski]

I've checked and it works ok in v0.1.3. Issue appered in v0.2.0

[jacekpaszkowski]

just to note. i was able to workaround my issues usung card-mod repeting the styles which disappear after loading the card.

[...]
    style: |
      ha-card {
        background-image: url('/local/images/xiaomi_vacuum_2.png')!important;
        background-size: cover!important;
        background-repeat: no-repeat!important;
        background-position: center center!important;
      }
    type: 'custom:xiaomi-vacuum-card'

[RomRider]

There is a feature for that in my new card which can replace vertical-stack-in-card
I've created a new card which is almost a drop-in replacement for vertical-stack-in-card and a bunch of other features:
https://community.home-assistant.io/t/stack-in-card-drop-in-replacement-for-vertical-stack-in-card/180072

[ofekashery]

Fixed in version 0.3.0, thanks!