No more background-color in style: for entities card in vertical-stack-in-card?

Hi,

suddenly my background color is gone, while the font color set in the style is fine.

has anything changed overnight in this style field:

  - 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.roosendaal_essen
          - sensor.essen_roosendaal

what am I missing now? tried background-color, or background, to no avail…hex color idem ditto.

it dod work before, and, if I use the exact style on a regular entities card, it colors right away… did the vertical-stack-in-card change maybe? Preventing contained card from using a background styling

please have a look? thanks!

update:
this seems to be caused by the 2 latest version of the card, reverting to version 0.1.3 solves the issue.

added to an existing filed issue ( I now discovered…): https://github.com/custom-cards/vertical-stack-in-card/issues/71

please add to the issue if you encounter this in your setup too.

Do yourself a favor and move away from the card. It breaks every version and you can accomplish the same goals with an entities card.

Yes, I understand what you’re saying, but the card has its advantages over the other 2 options, vertical-stack, and entities card. Most significantly the fact it automatically encloses the containing entities in 1 visual card, without having to set styles or other specific settings.
Also the entities setup seems to need more screen estate per containing card when used with fold-entity-row. A minor thing, but it is in these small details, things finally get their place in the frontend…

Do like to keep native cards as much as possible, so learning my way into the entities and vertical-stack cards :wink:

I was just so fed up with the vertical stack card that I got rid of it.

maybe you can help me out with this then:
when using the vertical-stack-in-card, the stacked cards use the full width of the card, opposed to the other options, where they are ‘embedded’ and really are cards within cards, hence are compressed horizontally.

Can we style that somehow, and have them appear as full width cards?

make the margin zero for the style, but you’ll still have a little bit of padding. Vertical in stack does the same thing, so I’m not sure why this is a problem anyways when switching between the two.

I guess it all boils down to trying to prevent as much styling as possible in each and every card config.
will try the padding and margin settings, and see what happens. Might have a look at the vertical-stack-in-card source code too for that matter :wink:

Style anchors are your friend :wink:

ya, I guess, this is what the vertical-stack-in-card does: https://github.com/custom-cards/vertical-stack-in-card/blob/a4afa205a1a2798e5cf773433b67d33767f111ab/vertical-stack-in-card.js#L139

translates into:

            style: |
              ha-card {
                box-shadow: none;
                background: transparent;
                border-radius: 0;
                margin: 0px;
              }

but first have to get the correct style… have another set with auto-entities cards, that can’t be styled in the regular way, and according to https://github.com/thomasloven/lovelace-card-mod#mod-card needs mod-card for each individual auto-entities card in my config, resulting in:

type: vertical-stack
cards:
  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:

      - type: custom:fold-entity-row
        head:
          type: section
          label: Family home
        entities:
          - type: custom:mod-card
            style: |
              ha-card {
                box-shadow: none;
                background: transparent;
                border-radius: 0;
                margin: 0px;
              }
            card:
              type: custom:auto-entities
              card:
                type: entities
                show_header_toggle: false
              filter:
                include:
                  - group: 'group.family_home'
                    options:
                      secondary_info: last-changed

etc
etc

this however doesn’t change the displayed cards at all… identical to

type: vertical-stack
cards:
  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:

      - type: custom:fold-entity-row
        head:
          type: section
          label: Family home
        entities:
          - type: custom:auto-entities
            card:
              type: entities
              show_header_toggle: false
            filter:
              include:
                - group: 'group.family_home'
                  options:
                    secondary_info: last-changed

I know the mod-card is being processed, because made an error before (cards instead of card) and that error out correctly in Red…

so, what am I missing here?

same effect when configured as a big entities card, (vs vertical-stack):

type: entities
title: Summary groups
show_header_toggle: false
entities:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Family home
    entities:
      - type: custom:mod-card
        style: |
          ha-card {
            box-shadow: none;
            background: transparent;
            border-radius: 0;
            margin: 0px;
          }
        card:
          type: custom:auto-entities
          card:
            type: entities
            show_header_toggle: false
          filter:
            include:
              - group: 'group.family_home'
                options:
                  secondary_info: last-changed

Hi @thomasloven please allow me to bother you once more… what am I doing wrong here? How can I mod the auto-entities cards correctly? They now really show as an entity card in an entity-card…

57

  - type: custom:fold-entity-row
    head:
      type: section
      label: Hubs binary pinged
    entities:
      - type: custom:mod-card
        style: |
          ha-card {
            box-shadow: none;
            background: transparent;
            border-radius: 0;
            margin: 0px;
          }
        card:
          type: custom:auto-entities
          card:
            type: entities
            show_header_toggle: false
          filter:
            include:
              - group: 'group.hubs_binary_pinged'
                options:
                  secondary_info: last-changed

What? No… put the style on each item going into the entities card.

anchors:
  in_card_style: &in_card_style
    style: 
      ha-card {
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        margin: 0px;
      }

type: vertical-stack
cards:
  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:
      - type: custom:fold-entity-row
        <<: *in_card_style
        head:
          type: section
          label: Family home
        entities:
          - type: custom:auto-entities
            card:
              type: entities
              show_header_toggle: false
            filter:
              include:
                - group: 'group.family_home'
                  options:
                    secondary_info: last-changed

Thanks, but no, this doesn’t work either, even tried it without anchor and explicitly styled like this:

type: vertical-stack
cards:
  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:
      - type: custom:fold-entity-row
        style: |
          ha-card {
            box-shadow: none;
            background: transparent;
            border-radius: 0;
            margin: 0px;
          }
        head:
          type: section
          label: Family home
        entities:
          - type: custom:auto-entities
            card:
              type: entities
              show_header_toggle: false
            filter:
              include:
                - group: 'group.family_home'
                  options:
                    secondary_info: last-changed

no change at all (both Safari and Chrome, so thats of no issue here either)

then fold entity row is one of those odd cards then.

  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:
      - type: custom:mod-card
        <<: *in_card_style
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: Family home
          entities:
            - type: custom:auto-entities
              card:
                type: entities
                show_header_toggle: false
              filter:
                include:
                  - group: 'group.family_home'
                    options:
                      secondary_info: last-changed

not just yet… If I do that, it styles the container card, and not the individual entitities (which in this config are custom fold-entity-row cards…)

taking the style one level down to these individual cards does nothing, as per earlier post.
So I am stuck…

try

  - type: entities
    title: Summary groups
    show_header_toggle: false
    entities:
      - type: custom:mod-card
        <<: *in_card_style
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: Family home
          entities:
            - type: custom:auto-entities
              card:
                type: custom:mod-card
                <<: *in_card_style
                card:
                  type: entities
                  show_header_toggle: false
              filter:
                include:
                  - group: 'group.family_home'
                    options:
                      secondary_info: last-changed

no, sorry, got a few errors with that config, mostly because of ‘entities need to be an array’ and only way to get that fixed was:

anchors:
  in_card_style: &in_card_style
    style: |
      ha-card {
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        margin: 0px;
      }

type: entities
title: Summary groups test
show_header_toggle: false
entities:
  - type: custom:mod-card
    <<: *in_card_style
    card:
      type: custom:fold-entity-row
      head:
        type: section
        label: Hubs pinged
      entities:
        - type: custom:mod-card
          <<: *in_card_style
          card:
            type: custom:auto-entities
            card:
              type: entities
              show_header_toggle: false
            filter:
              include:
                - group: 'group.hubs_binary_pinged'
                  options:
                    secondary_info: last-changed

but, and you might guess, this shows as:

08