After updating to 101.2 vertical-stack-in-cards behave unexpectedly

Not sure where to post this, but is anyone else seeing strange vertical-stack-in-cards in the frontend after updating to 101.2?

before, this was displayed as a nice (optical) single card, while after updating the top card stands out:

34
and is styled differently

code:

  - type: custom:vertical-stack-in-card
    cards:
      - type: glance
        title: Buienradar headline
        show_header_toggle: false
        entities:
          - sensor.br_feel_temperature
          - sensor.br_wind_force
          - sensor.br_condition

      - type: entities
        title: Buienradar details
        show_header_toggle: false
        entities:
          - type: custom:fold-entity-row
            head:
              type: section
              label: Temp & condition
            entities:
              - sensor.br_temperature
              - sensor.br_ground_temperature
              - sensor.br_condition_code
              - sensor.br_detailed_condition
              - sensor.br_full_condition
              - sensor.br_symbol
              - sensor.br_wind_direction
              - sensor.br_wind_direction_azimuth
              - sensor.br_wind_force
              - sensor.br_wind_gust
              - sensor.br_wind_speed
        ##      - sensor.br_irradiance

          - type: custom:fold-entity-row
            head:
              type: section
              label: Barometer
            entities:
              - sensor.br_precipitation
              - sensor.br_precipitation_forecast_average
              - sensor.br_precipitation_forecast_total
              - sensor.br_humidity
              - sensor.br_pressure
              - sensor.br_barometer
              - sensor.br_barometer_value
              - sensor.br_stationname
              - sensor.br_visibility

I’ve updated to the new custom card, and also tried the version before, but that doesn’t make a difference.

using @tom_l 's suggestion for entities card and using custom:ha-glance-card also shows the elevated card. Seems the cards now pickup on the default theme setting for border and shadow, where they didn’t do so before?

this:

  - type: entities
    title: Darksky current headline
    show_header_toggle: false
    entities:
      - sensor.dark_sky_temperature
      - sensor.dark_sky_wind_speed
      - sensor.dark_sky_summary
      - sensor.dark_sky_icon

      - type: custom:fold-entity-row
        head:
          type: section
          label: More detailed info
        entities:
          - sensor.dark_sky_daily_summary
          - sensor.dark_sky_hourly_summary
          - sensor.dark_sky_summary
          - sensor.dark_sky_apparent_temperature
          - sensor.dark_sky_cloud_coverage
          - sensor.dark_sky_dew_point
          - sensor.dark_sky_humidity
          - sensor.dark_sky_uv_index
          - sensor.dark_sky_ozone
          - sensor.dark_sky_precip
          - sensor.dark_sky_precip_intensity
          - sensor.dark_sky_precip_probability
          - sensor.dark_sky_pressure
          - sensor.dark_sky_visibility
          - sensor.dark_sky_wind_bearing
          - sensor.dark_sky_wind_gust

shows as I would like it to be:

07

why isn’t this working with the glance card?

There have been a few changes to it lately. https://github.com/custom-cards/vertical-stack-in-card/pulls?q=is%3Apr+is%3Aclosed

You can remove the drop shadow with card-mod and this style:

style: |
  ha-card {
    box-shadow: none;
  }

o thanks, missed that! will try.

would you happen to know why this doesn’t work after updating either:

  - type: custom:vertical-stack-in-card
    cards:
      - type: entities
        style: |
          ha-card {
          background: url('/local/images/aardbeving.jpg');
          background-size: 100% 400px;
          color: white;
          }

It doesn’t display the image anymore, and no text is visible.

commenting out the style makes it all visible again:

before you ask :wink: it shouldn’t be the color setting, because with my main theme, the text isn’t visible either:

32

Not really, no. I get my styles by trial and repeated error. :face_with_raised_eyebrow:

Does indenting it help?

  - type: custom:vertical-stack-in-card
    cards:
      - type: entities
        style: |
          ha-card {
            background: url('/local/images/aardbeving.jpg');
            background-size: 100% 400px;
            color: white;
          }

no it doesn’t, tried the before…

silly thing is this does work on the darksky card:

type: 'custom:dark-sky-weather-card'
style: |
  ha-card {
  background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
  background-size: 100% 400px;
  --primary-text-color: var(--primary-text-color);
  --secondary-text-color: var(--secondary-text-color);
  --paper-item-icon-color: var(--primary-text-color);
  }

so I figured it might be the vertical-stack-in-card that has been changed

It has:

Must confess I don’t really understand what that all means, but tried to use the older version of the vertical-stack-in-card again et voila:

42

will raise an issue on the card :wink:

1 Like