BUG: vertical-stack-in-card does not work properly with popular styling plugin "card-mod" (by thomasloven)

[sstefanowski]

Hello,
I just noticed that vertical-Stack-in-card does not work properly with popular styling "card-mod".

Versions:
vertical-stack-in-card: 0.4.0
card-mod: 3.0.5
HA: 2021.1.5

Symptoms:
Configure more than one instance of vertical-stack-in-card on the same page. Then set the unique/different styling of each instance (with card-mod) - e.g. by setting different background JPG. After saving all instances will have the same CSS settings :(

Example
I wanted to have 4 instances with different background e.g. first with

title: Kitchen
type: 'custom:vertical-stack-in-card'
cards:
(...)
card_mod:
  style: |
    ha-card {
      background: url("/local/Kitchen.jpg") center no-repeat;
    }

second with

title: Livingroom
type: 'custom:vertical-stack-in-card'
cards:
(...)
card_mod:
  style: |
    ha-card {
      background: url("/local/Livingroom.jpg") center no-repeat;
    }

In "card editor" the background is rendered correctly (each card has different background) but after saving and closing the editor all cards on the page change it's background (JPG) to the one configured with the last vertical-stack-in-card on the page.
It looks like the "ha-card" style is shared between all instances on the page and it's is overridden with the value set by the last instance in a page code - therefore and will be always the same on all instances.

Note: The other custom cards like "banner-card" or "thermostat-dark-card" do not have this issue - they can have a different background on the different instance on the same page using card-mod... so I think this is the BUG of vertical-stack-in-card.

Question: Can you fix it to make it fully compatible with "card-mod' by thomasloven?

[Zendio]

When I attach the card mod styling ("Feed" in the picture), it somehow breaks the vertical-stack-in-card.

Edit: Seems unrelated. After a lot of testing I found that if the vertical-in-stack-card is part of a vertical card (supplied by HA) it no longer forms the card correctly. This has only happened recently when updating to the latest HA.

[artem30801]

Are there any workarounds you were able to find?

[ofekashery]

Hi there, please try this config:

title: Kitchen
type: 'custom:vertical-stack-in-card'
styles:
  '--ha-card-background': 'url("/local/Kitchen.jpg") center no-repeat;'
cards:
(...)

[artem30801]

Hi there, please try this config:

title: Kitchen
type: 'custom:vertical-stack-in-card'
styles:
  '--ha-card-background': 'url("/local/Kitchen.jpg") center no-repeat;'
cards:
(...)

Thank you for your reply! Tried this code (colors instead of images):

  - title: Test
    cards:
      - title: Kitchen
        type: "custom:vertical-stack-in-card"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 255, 0, 1);
            }
        cards:
          - type: markdown
            content: >
              ## Lovelace
          - type: markdown
            content: >
              ## Lovelace2
      - title: Livingroom
        type: "custom:vertical-stack-in-card"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(255, 0, 0, 1);
            }
        cards:
          - type: markdown
            content: >
              ## Lovelace3
          - type: markdown
            content: >
              ## Lovelace4

Result: (only last style applied, despite the fact that the first card should be green)

I then tried your suggestion, @ofekashery , with code

  - title: Test
    cards:
      - title: Kitchen
        type: "custom:vertical-stack-in-card"
        styles:
          "--ha-card-background": rgba(0, 255, 0, 1)
        cards:
          - type: markdown
            content: >
              ## Lovelace
          - type: markdown
            content: >
              ## Lovelace2
      - title: Livingroom
        type: "custom:vertical-stack-in-card"
        styles:
          "--ha-card-background": rgba(255, 0, 0, 1)
        cards:
          - type: markdown
            content: >
              ## Lovelace3
          - type: markdown
            content: >
              ## Lovelace4

Result: (it works as expected, but it only changes styles of child cards, not original vertical-stack-in-card)

[regevbr]

@sstefanowski I fixed it in PR #111, until it is merged, you can just apply the same changes to the code in your config folder (which is what I did)