Unless you share your config, it’s going to be hard to help
Yes 
Lovelace in mode storage
Version core-2021.2.2
supervisor-2021.02.6
Home Assistant OS 5.11
HACS version 1.11.2
- title: tests2
path: test2
panel: false
theme: noctis
badges: []
cards:
- type: horizontal-stack
title: Temperature
cards:
- type: 'custom:button-card'
color_type: card
entity: switch.enocean_relais_chaudiere_0
state:
- value: 'on'
icon: 'mdi:recycle-variant'
color: green
name: 'Circulation'
- operator: default
icon: 'mdi:slack'
color: grey
name: 'Pompe Arret'
- type: custom:stack-in-card
title: Temperature
mode: horizontal
cards:
- type: 'custom:button-card'
color_type: card
entity: switch.enocean_relais_chaudiere_0
state:
- value: 'on'
icon: 'mdi:recycle-variant'
color: green
name: 'Circulation'
- operator: default
icon: 'mdi:slack'
color: grey
name: 'Pompe Arret'
Hi Romrider,
with the latest updates in HA, I suddenly notice a tiny gap between the cards that come before and after an auto-entities card in the larger stack-in-card:
my config is using:
type: custom:stack-in-card
keep:
background: true
cards:
since forever, and I havent changed anything here. Would this be a stack-in-card issue with the newest frontend, or could it probably be caused by the auto-entities (which has seen a few updates itself last couple of days)
core of the card is:
type: custom:stack-in-card
keep:
background: true
cards:
- type: custom:hui-element
card_type: markdown
content: >
etcetc content
- type: horizontal-stack
cards:
- type: picture-entity
etcetc
- type: picture-entity
etcetc
- type: picture-entity
etcetc
- type: custom:auto-entities
card:
type: entities
title: Volgende ophaaldata
filter:
exclude:
- entity_id: sensor.afvalwijzer*next*
- entity_id: sensor.afvalwijzer*to*
include:
- entity_id: sensor.afvalwijzer_*
options:
type: custom:template-entity-row
etcetc
- type: entities
show_header_toggle: false
entities:
- entity: input_boolean.trash_reminder
secondary_info: last-changed
etc etc
maybe related to auto-entities, which has changed quite a few time lately, so also posted an issue https://github.com/thomasloven/lovelace-auto-entities/issues/173
if I take out the keep: the gaps gone, but the background of some of my cards is too 
so that’s not an option…
taking out the full auto-entities section makes the gap go away too.
Some time ago I posted a new issue:
The problem is with a clipping tooltip when using a stock “history-graph” card:
It never happens with a stock “vertical-stack” card.
Now I realized that the reason of this clipping may be because of CSS style "overflow: hidden" which is set for “custom:stack-in-card” by default.
A possible workaround - use "card-mod" & set "overflow: visible":
The final result:
type: 'custom:stack-in-card'
style: |
ha-card {
overflow: visible !important;
}
cards:
- type: history-graph
entities:
- sun.sun
hours_to_show: 6
refresh_interval: 0
I described the possible reason & solution in that GitHub issue - hope it will be investigated.
Hi,
Maybe somebody can help with my next question, because I’m lost in space! -)
I am trying to build a lovelace card with buttons who are able to show different other cards below with entities.
My goal is this screenshot example here:
But i’m not able to get this done!
This is my result at the moment:
Everything on my card is horizontal!
And I want the cards with my entities results lower, like in the example.
And I’m also not able to find a option to customize my font size in my buttons!
Also it would be nice to have my selected button in a kind of highlighted state!
type: 'custom:stack-in-card'
mode: horizontal
cards:
- type: 'custom:button-card'
name: Woonkamer
icon: 'hass:sofa'
tap_action:
action: navigate
navigation_path: '#p1'
- type: 'custom:button-card'
name: Slaapkamer Ouders
icon: 'hass:bed'
tap_action:
action: navigate
navigation_path: '#p2'
- type: 'custom:button-card'
name: Slaapkamer Lukas
icon: 'hass:bed'
tap_action:
action: navigate
navigation_path: '#p3'
- type: 'custom:button-card'
name: Slaapkamer Jasper
icon: 'hass:bed'
tap_action:
action: navigate
navigation_path: '#p4'
- type: 'custom:state-switch'
entity: hash
default: p1
states:
p1:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
graph: line
name: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
name: Co2
p2:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.slaapkamer_ouders
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
name: Co2
p3:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
name: Co2
p4:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.slaapkamer_jasper
name: Temperatuur
Thx,
JurgenWhat do you expect if you use mode: horizontal?
You have the stack-in-card as the main card and you use mode:horizontal. That means that ALL cards inside that stack will be displayed horizontal. You have to put the main card as vertical an inside that card, all horizontal-stacks. So you get:
STACK-IN-CARD VERTICAL
- HORIZONTAL-STACK
- HORIZONTAL-STACK
- HORIZONTAL-STACK
- HORIZONTAL-STACK
This translates in multiple horizontal stacks in a vertical stack. So exactly like the first picture. Also, you don’t really need stack-in-card for this, unless you need the extra options or you’re trying to place it inside a different card, like picture-elements. You can just use vertical-stack card (like you use horizontal-stack).
Ok, but after adapting my config I get this:
My sensors are almost correct, but now my buttons are vertical!
I guess I don’t understand the whole stuff correctly.
type: 'custom:stack-in-card'
mode: vertical
cards:
- type: 'custom:button-card'
name: Woonkamer
icon: 'hass:sofa'
size: 30px
tap_action:
action: navigate
navigation_path: '#p1'
- type: 'custom:button-card'
name: Slaapkamer Ouders
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p2'
- type: 'custom:button-card'
name: Slaapkamer Lukas
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p3'
- type: 'custom:button-card'
name: Slaapkamer Jasper
icon: 'hass:bed'
size: 30px
tap_action:
action: navigate
navigation_path: '#p4'
- type: 'custom:state-switch'
entity: hash
default: p1
states:
p1:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
graph: line
name: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
name: Co2
p2:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.slaapkamer_ouders
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
name: Co2
p3:
type: horizontal-stack
cards:
- type: sensor
entity: >-
sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
naam: Temperatuur
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
name: Luchtvochtigheid
- type: sensor
graph: line
entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
name: Co2
p4:
type: horizontal-stack
cards:
- type: sensor
entity: sensor.slaapkamer_jasper
name: Temperatuur
In need 2 rows, one row with my buttons, and the other with my sensors.
No, that’s not what I wrote. You now created:
STACK-IN-CARD VERTICAL
- BUTTON CARD
- BUTTON CARD
- BUTTON CARD
- BUTTON CARD
- HORIZONTAL-STACK
You need to create the button-card inside a horizontal-stack, just like all other rows you created. This is what it actually means:
So you have ONE vertical-stack, that places all cards inside it under another. Then inside that, you place horizontal-stacks, containing cards you want in a horizontal line.
In need 2 rows, one row with my buttons, and the other with my sensors.
If you need two rows, then you need to create two rows, just like I explained. A horizontal-stack is a row of cards. So if you need 2 rows, create two horizontal-stacks and put both stacks inside a vertical-stack. Makes sense?
Thanks for your help ASNNetworks!
Here my result:
Is it also possible to highlight the active button?
And adapt my button font size?
1 Like
That is all possible, but that’s not what this thread is about. That is all up to custom:button-card. You should read the docs of button-card first, because it has a lot of options and is very powerful. All is possible, but you need to make it work and spend a lot of time figuring stuff out. You need to work with state. If you need help regaring button-card, you can ask here: Lovelace: Button card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)
Thx I will do!
Thanks for a good card!
Q; Can someone tell me if, and maybe how, I could change the vertical position of the title in my card, as shown
type: 'custom:stack-in-card'
mode: horizontal
title: Badrum
keep:
box_shadow: false
margin: true
border_radius: false
background: false
outer_padding: false
cards:
- type: 'custom:mini-graph-card'
entities:
- sensor.badrummet
hours_to_show: 72
line_color: green
line_width: 4
font_size: 80
hour24: true
animate: true
show:
name: false
icon: false
extrema: true
- type: 'custom:mini-graph-card'
entities:
- sensor.badrummet_2
hours_to_show: 72
line_color: grey
line_width: 4
font_size: 80
hour24: true
animate: true
show:
name: false
icon: false
extrema: true
HI @RomRider
trying to get a background on a horizontal-stack (with a couple of custom:button-card s) in a stack-in-card, I am stuck. Apparently we can not (yet) set a background on a horizontal stack?
as explained here I’ve tried the various options known to me, and some alternatives, none of which come close to what I am looking for:
Id like the background to only show on the horizontal stack, and have the reset of the stack-in-card as regular card.
Would you know of a way, or, if not, be willing to see if either of your cards could be FR’ed…?
thanks for having a look!
where is the actual .js file for this? cannot find it on the page anywhere.
It is in the releases, on github.
I think I’m being thick but I can’t seem to keep a margin between each card in the stack. This is what I’ve put together without any joy. Can you point me to what I should be doing. Thanks
type: 'custom:stack-in-card'
keep:
- margin: 'true'
title: Living room
cards:
- type: entities
entities:
- switch.light
- switch.telly
- type: media-control
name: Sonos Beam
entity: media_player.living_room
- type: media-control
entity: media_player.living_room_tv
margin: true not margin: 'true'
1 Like
Hi Rom, again an amazing card that I’m trying to fit in… I had some trouble initially figuring out how the background works but got this solved.
One maybe stupid question, but is there a simple way to play with the size and styling of the card ? Currently I tried using card-mod but without success.
Have you tried using mod-card (not card-mod, but is part of card-mod_. GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Since stack-in-card doesn’t gave an actual card, you need mod-card. Same applies to cards like vertical-stack etc.
Check your indentations. Right at the top, below the mod-card. Whenever you see: card (and not cards), this ALWAYS means the code expects ONE card. So no array (-).
So leave out the (-) before the stack in card and put the indents correct, then the code is correct. (I’m on mobile right now, so difficult copy/pasting your code with fix).