Stack-In-Card: Drop-in replacement for vertical-stack-in-card

Hi, thank you for you for that tip: it’s a good one! :+1:
This is what I get:
image

I see.
Consequences of “modern & shiny” border UI from HA 2022.11.
Try using this.

1 Like

Thank you very much, that was it!!! :bowing_man:

The text is truncated by an inner card, not by stack-in-card.

Posting long code will not help you.
What MAY help you - replacing stack-in-card with a standard stack since it may point you a direction.

It may help.
Someone who knows more than me may see it and want to help.

That should have been YOUR intention to test with a super simple case first - standard stack with button card with simple styles - and then increase complexity slowly.

Hi,
Is it just me or is anyone else having issues with the stack-in-card after 2024.3 HA core update? It seems to me that some changes were made that messed up the layout. The stack-in-card now has a gap of 8px just like the HA native stack cards. I know it seems like a long shot, but can there be something done about it? I use it quite a lot in my setup.

A simple rule: if you observe smth unusual with a custom card , check “issues” in a corr. repo.
In this particular case there is a registered issue.

I didn’t think there will be any new issues opened as it is no longer maintained.

Hello,
I want to ask for help.
Stack-in-card does not work with card-box-shadow configuration.
What should I do? What needs to be changed

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if not is_state('climate.nappali_klima', 'off') %}
            position: relative;
          }
          .shape:after {
            content: ' ';
            position: absolute;
            width: inherit;
            height: inherit;
            border-radius: 500px;
            border: 2px solid #ADFF2F;
            border-left-color: transparent;
            animation: spin 1s linear infinite;
            {% endif %}
          }
        .: |
          :host {
            {% set sensor_dws_state = 
            (is_state('binary_sensor.dws_nappali_bal_contact', 'off') or is_state('binary_sensor.dws_nappali_jobb_contact', 'off')) %}
            {% set sensor_zone_state = 
            (is_state('binary_sensor.zone_nappali_bal_abl_open', 'off') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'off')) %}

            {% if sensor_dws_state and sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px red;
            {% elif not sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: none;
            {% elif sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px orange;
            {% else %}
            --ha-card-box-shadow: 0 0 10px grey;
            {% endif %}
          }
          ha-card {
            {% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
            --card-primary-color: red;
            {% else %}
            --card-primary-color: inherit;
            {% endif %}
          }
    secondary: >-
      {{states('sensor.nappali_e6b0_temperature') | float(default=0) |
      round(1)}} °C

      {{states('sensor.nappali_e6b0_humidity') | float(default=0) | round(1)}} %
    icon: mdi:sofa
    entity: light.led_driver_nappali_padlo
    tap_action:
      action: navigate
      navigation_path: /dashboard-kezelfelulet/nappali
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.led_driver_nappali_padlo','on') %}
        orange
      {% endif %}
    multiline_secondary: true
    badge_color: >-
      {% set cover_position = state_attr('cover.redony_nappali',
      'current_position') %}

      {% if cover_position is defined %}
        {% if cover_position == 0 %}
          red
        {% elif cover_position == 100 %}
          green
        {% else %}
          yellow
        {% endif %}
      {% else %}
        grey
      {% endif %}
    badge_icon: >-
      {% set cover_position = state_attr('cover.redony_nappali',
      'current_position') %}

      {% if cover_position is defined %}
        {% if cover_position == 0 %}
          mdi:window-shutter
        {% elif cover_position == 100 %}
          mdi:window-shutter-open
        {% else %}
          mdi:window-shutter
        {% endif %}
      {% else %}
        mdi:window-shutter-cog
      {% endif %}
    primary: Nappali
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - condition: state
            entity: climate.nappali_klima
            state_not: 'off'
        chip:
          type: entity
          entity: input_button.press_nappali_klima
          content_info: none
          icon_color: '#ADFF2F'
          tap_action:
            action: toggle
          hold_action:
            action: call-service
            service: climate.turn_off
            target:
              device_id: 2bc7ab9b606c7bf00d2a8bc3deacd372
          double_tap_action:
            action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          top: -45px;
          z-index: 0;                
        }
  - type: conditional
    conditions:
      - entity: timer.climate_off_timer
        state: active
    card:
      type: entities
      entities:
        - entity: timer.climate_off_timer
          name: ' '
          icon: none
      state_color: true
      card_mod:
        style: |
          ha-card {
            top: -145px;
            z-index: 1;
          }
          .card-content {
            color: #ADFF2F;
          }
card_mod:
  style: |
    ha-card {
      height: 70px;
    }

please only post the relevant bit, and not the huge config so we need to go find your issue ?

I apologize for sharing the long line of code.
My card configuration was working fine before I started using the Stack-in-card. The extension is working properly. The card-box-shadow part from the old configuration does not work.
I am a beginner and I also have language difficulties. I can’t explain it any better. I try to share information according to my knowledge.

The problematic detail, it does not appear:

          :host {
            {% set sensor_dws_state = 
            (is_state('binary_sensor.dws_nappali_bal_contact', 'off') or is_state('binary_sensor.dws_nappali_jobb_contact', 'off')) %}
            {% set sensor_zone_state = 
            (is_state('binary_sensor.zone_nappali_bal_abl_open', 'off') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'off')) %}

            {% if sensor_dws_state and sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px red;
            {% elif not sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: none;
            {% elif sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px orange;
            {% else %}
            --ha-card-box-shadow: 0 0 10px grey;
            {% endif %}
          }

no need to apologize!

first thing I would do I delete the template and make that mod use a fixed color.

that way you can solve your most important quest: which element to target.

Can you post a screenshot of the card, and indicate what you want to colorize?

If it is something for the main stack-card, you will probably need to use custom:mod-card, because stack-cards most of the time do Not have a ha-card element, and mod-card injects that.

If you only want to colorize the border of an individual card, we need to focus on that specific card ofc.

also, in my experience there is nothing we can Not do with stock type entities, vertical-/horizontal-stack or grid card and use card-mod to change some properties and use custom:hui-element to use cards in entities card.

all of the custom stack cards around have their intricacies and they can be unpredictable, or have deeper effect than one might expect.

image

The card on the left is the original. The card-mod change works. (The box-shadow is red or orange depending on the state of the DW sensor)
The card on the right is the Stack-in-card. Changing the card mod does not work.

if that complet card is the stack-in-card, I believe you could try this

```
type: custom-mod-card
card_mod:
style: |

card:
type: stack-in-card

```

ofc , need to find the correct card for the mod-card, and add that complete template.
I dont use stack-in-card

but, check this Stack-In-Card: Drop-in replacement for vertical-stack-in-card - #258 by Ildar_Gabdullin

hmm, in particular 🔹 Card-mod - Add css styles to any lovelace card - #2028 by Ildar_Gabdullin mentions you should be able to see that border style there…

not sure, need more study :wink:

Stack-in-card does not need mod-card.
You can use card-mod explicitly:

type: custom:stack-in-card
...
card_mod:
  ...

great, as I read in those examples, thanks for confirming,
Ive edited in the post above

then Thomas needs to find the reason his box border doesnt get applied

He needs to look at the keep object. By default, stack in card removes most elements within the stack, including the box shadow:

Keep object

… and unfortunately “keep” may not work after some recent changes in HA frontend, so card-mod should be used…

Chronologically:
– keep did not work properly for a “stack inside a stack” case,
– keep MAY not work properly for borders (even after a fix) when shadows were replaced by borders in ~2021.12 (???),
– keep MAY not work properly after recent changes for stacks (2024.?)

1 Like