For a long time now, i was using template card in stack in card. I found really pretty to have the border separating each template card. Previously the bord from template card near one and another were at the same place, it was like that :
The problem is, since 2024.3 it’s doing something like this which is really ugly to me :
I want to get back to the result i had before but i honestly have no idea how. Here’s the beginning of the yaml code :
type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:virus-outline
primary: PM 2.5
secondary: '{{states(''sensor.pure_humidify_cool_pm_2_5'')| int}} µg/m³'
entity: sensor.pure_humidify_cool_pm_2_5
icon_color: >-
{% if states('sensor.pure_humidify_cool_pm_2_5') | float > 400
%}
#f94144
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 250
%}
#f9844a
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 100
%}
#ee9b00
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 25
%}
#ee9b00
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 0
%}
white
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
min-height: 137px ;
}
- type: custom:mushroom-template-card
icon: mdi:flower-pollen
primary: PM 10
secondary: '{{states(''sensor.pure_humidify_cool_pm_2_5'')| int}} µg/m³'
entity: sensor.pure_humidify_cool_pm_10
icon_color: >-
{% if states('sensor.pure_humidify_cool_pm_2_5') | float > 400
%}
#f94144
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 250
%}
#f9844a
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 100
%}
#ee9b00
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 25
%}
#ee9b00
{% elif states('sensor.pure_humidify_cool_pm_2_5') | float > 0
%}
white
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
min-height: 137px ;
}
Do you guys have any idea how to solve this “problem” and go back to where i was before ?
Thanks in advance
There is an issue already.
opened 02:47PM - 07 Mar 24 UTC
bug
<!-- READ THIS FIRST:
- If you need additional help with this template please r… efer to https://www.home-assistant.io/help/reporting_issues/
- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
- Provide as many details as possible. Do not delete any text from this template!
-->
**Checklist:**
- [ x ] I updated to the latest version available
- [ x ] I cleared the cache of my browser
**Release with the issue:** 0.2.0
**Last working release (if known):**
**Browser and Operating System:** Chrome 122.0.6261.112 , Win10
<!--
Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
-->
**Description of problem:**
In 2024.3 was changed a code for stacks in HA.
Probably because of this in `stack-in-card` margin between cards became always set independently on a value of `keep`::`margin`.
Consider a code:
```
type: custom:stack-in-card
keep:
margin: false
background: true
cards:
- &ref_card
type: button
entity: sun.sun
card_mod:
style: |
ha-card {background: red;}
- *ref_card
```
![image](https://github.com/custom-cards/stack-in-card/assets/71872483/c945d878-6a3d-48ed-b821-131697d1ff0e)
<!-
-
Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
-->
**Javascript errors shown in the web inspector (if applicable):**
```
```
**Additional information:**
But the plugin is rather abandoned.
P.S. I would not suggest you to clutter a description of the problem with unrelated stuff. Use simple Entity card as inners, all these mushrooms & card-mod are just a distraction.
Wasn’t quite sure the problem was related to stack-in-card. If i had to drop stack-in-card, which card should i use for the same render ? Vertical-stack-in-card seems quite abandonned too
tom_l
March 7, 2024, 9:04pm
4
The way I do this is to put cards in entities cards using this:
Funny thing about lovelace - cards, rows in the entities card, badges and elements in the picture-elements card work exactly the same behind the scenes.
That means that you can use them interchangeably if you know how, and e.g. put a button right in an entities card, a badge somewhere in the middle of your view or a markdown card (with background and border removed) right in your carefully crafted picture-elements card. Pretty neat stuff that allows for some fantastic creations.
However. Becau…
e.g. These are all entities cards:
Looks like a lot fo rework for someone not used to front-end. But thanks for the link, i’ll look into it
Stack-in-card is not updating for a rather long time; some changes were made by other people (border); some changes may be done by card-mod.
Icarus81
(Andreas)
April 11, 2024, 9:14am
7
Did you find a viable way of redoing your cards? - i am stuck with the same issue
I have been suggesting vertical-stack-in card as of late. Stack-in-card was my go to, but has become finicky. At least worth a try…
Icarus81
(Andreas)
April 11, 2024, 9:19am
9
Btw…
Just found this solving the issue for each card:
type: custom:stack-in-card
card_mod:
style: |
:host {
--stack-card-margin: 1px;
--ha-card-border-width: 1px;
--stack-card-gap: 0;
You can use directly under ha-card which can be helpful with additional mods.
card_mod:
style: |
ha-card {
margin: 1px;
border-width: 1px;
--stack-card-gap: 0;
1 Like
Icarus81
(Andreas)
April 11, 2024, 9:41am
12
Way better solution than mine. - and by modifying border-width to 0px (or whatever) you get the same outer border as the rest of the cards!
Yes sir, you get it!! The gap can be negative as well if you use a grid layout card inside the stack…
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
margin: -10px 0px 0px 0px
cards:
1 Like