I think this is not actually an issue with stack-in-card, as it does eliminate the gap between the 2 entities cards, as confirmed by looking at Web Developer Tools in a (firefox) browser.
The issue therefore comes from the entities cards themselves, with each having an even 8 pixel padding around the main card content, which then adds up to a 16 pixels gap between the 2 cards.
You can address this by using Thomas Lóven’s card-mod , which (assuming you don’t already know this) allows you to style individual cards at a very fine grained level.
This code works for me using this approach:
- type: custom:stack-in-card
title: Kid1 Chores
mode: vertical
cards:
- type: entities
card_mod:
style: |
div#states.card-content {
padding-bottom: 4px;
}
entities:
- entity: input_boolean.chore_12
- entity: input_boolean.chore_11
show_header_toggle: false
state_color: true
- type: entities
card_mod:
style: |
div#states.card-content {
padding-top: 4px;
}
entities:
- entity: input_boolean.chore_10
state_color: true
show_header_toggle: false
If you don’t want to use card-mod, and it maybe won’t be straightforward if you have several conditional cards showing or not showing, then maybe you could try using a single entities card with conditional rows instead? (I’ve not explored this myself to see if it works)
Assume you got two entities cards with fixed padding-bottom (as it was advised before).
driz
September 14, 2022, 12:13am
230
This is great! I will give this a shot and see how it works, thank you!
Thank you as well Ildar_Gabdullin , I will be sure to check for the issues with conditional cards and possible work-arounds.
Do you guys have any problem of show stack in card on phone? I use both Android and iOS but can’t load. On PC is fine
Basically when one stack contains another stack - this glitches on iOS.
CDRX2
September 14, 2022, 2:26pm
233
I’ve noticed this also on Chrome and on Android Companion app… Reverted to 0.1.1 and works as expected in my case.
Is this not recommended to use anymore since its abandoned? Is it any alternatives to use?
flemmingss
September 17, 2022, 2:11pm
235
Does it even work? did not for me
opened 12:10PM - 16 Sep 22 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:**
Home Assistant 2022.9.4
Supervisor 2022.08.6
Operating System 9.0
Frontend 20220907.2 - latest
**Last working release (if known):**
**Browser and Operating System:**
Google Chrome
Version 105.0.5195.126 (64-bit)
**Description of problem:**
Installed with HACS, dont working, tried reboot and clean cashe
resource is added automaticly
<!--
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:**
Works in my setup.
There is a glitch on the picture (a line between stacks) but this is another issue…
All my issues may be fixed by card-mod.Like this wrong margin (empty space of white color):
code
type: custom:stack-in-card
mode: vertical
keep:
background: true
box_shadow: false
margin: false
outer_padding: false
border_radius: false
cards:
- type: entities
entities:
- sun.sun
card_mod:
style: |
ha-card {background-color: red}
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
box_shadow: false
margin: true
outer_padding: true
border_radius: false
cards:
- type: button
card_mod:
style: |
ha-card {background-color: cyan }
- type: button
card_mod:
style: |
ha-card {background-color: cyan }
- type: button
card_mod:
style: |
ha-card {background-color: cyan }
card_mod:
style: |
ha-card {background-color: green}
PaoloTK
October 21, 2022, 8:32pm
237
I guess there’s no card_mod fix for the stack inside stack showing box-shadows, margin, etc.? I found that by using the stock horizontal or vertical stack cards the issue doesn’t occur. Unfortunately I’m using collapsable-cards which has the problem.
tontze
November 17, 2022, 4:27pm
238
couldnt get it working either, card type not found
alnavasa
November 29, 2022, 7:33am
239
Hello everyone, I am doing a energy card, and I am getting issues with the doble and tripple. backgrounds.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:mushroom-template-card
primary: 'Casa: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: 5px;
margin-bottom: 2px;
width: 180px;
margin-left: 10px;
}
- type: custom:apexcharts-card
chart_type: donut
header:
show: false
show_states: false
colorize_states: false
series:
- entity: sensor.resto_c
show:
legend_value: false
datalabels: false
- entity: sensor.shelly_ion
show:
legend_value: false
datalabels: false
- entity: sensor.rpabellon
show:
legend_value: false
datalabels: false
- entity: sensor.shelly_
show:
legend_value: false
datalabels: false
- entity: sensor.depuradora
show:
legend_value: false
datalabels: false
- entity: sensor.lights_po
show:
legend_value: false
datalabels: false
update_interval: 120s
apex_config:
legend:
show: false
chart:
height: 180px
card_mod:
style: |
ha-card {
margin-left: +10px;
width: 180px;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: 'Otros: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: yellow
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: 5px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Cocina: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Pabellón: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: red
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Pérgola: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: deep-purple
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Depuradora: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mushroom-template-card
primary: 'Luces piscina: {{ states(''sensor.energy'') }} W'
secondary: '{{ states(''sensor.cost'') }} €/h'
icon: mdi:home
entity: sensor.cost
icon_color: green
layout: horizontal
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: 0px;
width: 180px;
margin-left: 0px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.energy
color: rgba(245,6,54,0.5)
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 70
animate: true
height: 100
show:
name: false
icon: false
state: false
extrema: false
average: false
legend: false
card_mod:
style: |
ha-card {
margin-top: -50px;
}
view_layout:
position: sidebar
fake values for now
Hello,
I love the potential of this simple add-on card, but I am finding that there are grey lines between the stacked child-cards. (See attached image.) Is there any way to get rid of them? They are quite distracting? I see them both in Firefox and Chromium. I had a look on this forum thread, but could not find an answer. Any help would be much appreciated.
type: custom:stack-in-card
mode: vertical
cards:
- type: glance
entities:
- entity: sensor.living_room_temperature
name: Lounge
- entity: sensor.bedroom_temperature
name: Bedroom
- entity: sensor.office_temperature
name: Office
- entity: sensor.bathroom_thp_sensor_temperature
name: Bathroom
- entity: sensor.hallway_temperature
name: Hallway
- type: glance
entities:
- entity: sensor.calathea_monitor_soil_moisture
name: Calathea
icon: mdi:flower
- entity: sensor.spider_plant_monitor_soil_moisture
name: Spider plant
icon: mdi:flower
- type: tile
entity: alarm_control_panel.alarmo
name: Alarm
- type: tile
entity: sensor.average_temperature
icon: mdi:thermometer
name: Avg. Temperature
- type: tile
entity: switch.adaptive_lighting_default
name: Circadian lighting
- type: tile
entity: light.living_room_light
icon: mdi:ceiling-light
name: Lounge
- type: tile
entity: light.kitchen_lights
icon: mdi:ceiling-light-multiple
name: Kitchen
- type: tile
entity: light.office_light
icon: mdi:ceiling-light
name: Office
- type: tile
entity: light.hallway_light
icon: mdi:ceiling-light
name: Hallway
- type: tile
entity: switch.bedside_lamp
icon: mdi:lamp
name: Bedside lamp
I think these “lines” came after 2022.11 release.
There was a PR to solve this issue (something with a new “keep border” option); do not remember if this PR was merged on not; anyway, with this or w/o this PR still I observe unsolved issues with borders (have to fix them by card-mod, see GitHub issues for details).
NJJay
February 6, 2023, 4:08am
242
Hey Guys/Gals,
Having some trouble here getting rid of the lines on the bottom buttons and the border on top and shadow on the top card. Any help would be appreciated. I’m just testing to get it right before i play with the entities so don’t mind those.
type: custom:stack-in-card
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
mode: vertical
cards:
- type: custom:button-text-card
styles:
card:
- '--keep-background': 'true'
title: Master Bedroom
subtitle: null
icon: mdi:bed-king
icon_size: 48
large: true
- type: custom:stack-in-card
keep:
box_shadow: true
margin: false
border_radius: false
background: false
outer_padding: false
mode: horizontal
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.master_lights
name: Master
show_state: false
icon_height: 40px
icon: mdi:bed-king
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.kitchen_lights
name: Kitchen
icon_height: 40px
show_state: false
icon: hue:room-kitchen
- show_name: true
show_icon: true
type: button
entity: fan.master_fan
name: Fan
icon: mdi:ceiling-fan
icon_height: 60px
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.all_lights_no_hallway
name: Good Night
show_state: false
icon_height: 40px
icon: mdi:weather-night
CDRX2
February 6, 2023, 7:36am
244
Or you can also forego stack-in-card and use layout-card with even more flexibility.
NJJay
February 6, 2023, 3:47pm
245
I don’t need flexibility I need simplicity, the layout card seems fairly complicated.
CDRX2
February 6, 2023, 5:32pm
246
Indeed, the layout-card is not very simple to begin with, just a suggestion to avoid the bug with stack-in-card that’s been around for quite a while now.
wouldn’t this simply be fixed by the generic
ha-card-border-width: 0px
in the theme settings we need nowadays? (required after a change in default ha frontend settings some updates go)
2 Likes
