Spaces between borders appeared in stack in card

Configuration Frontend
1

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 :

sdfsdfsdfsdfsdfsdf

The problem is, since 2024.3 it’s doing something like this which is really ugly to me :

sdfsdfsdfsdf
sdfsdfsdfsdf704×216 10.1 KB

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

2

There is an issue already.

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.

3

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

4

The way I do this is to put cards in entities cards using this:

e.g. These are all entities cards:

Screenshot 2024-03-08 at 08-01-12 Overview – Home Assistant
Screenshot 2024-03-08 at 08-01-12 Overview – Home Assistant1854×803 141 KB

5

Looks like a lot fo rework for someone not used to front-end. But thanks for the link, i’ll look into it :+1:

6

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.

7

Did you find a viable way of redoing your cards? - i am stuck with the same issue

8

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…

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;
10

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
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!

13

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