Hi, thank you for you for that tip: it’s a good one!
This is what I get:
Thank you very much, that was it!!!
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.
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
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:
… 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.?)