I had the same problem… Adding this to the affected theme solved the issue, thanks!
Hello Ildar_Gabdullin, I am absolute newbie with home assistant I don’t even know how to write a comment here in general. 
Sorry I’m comenting you now directly but maybe you can help me out. i’m struggling with stack in card right now. I would actually like to display the visualization like in the lower picture. Do you maybe have a solution?
views:
- theme: Mushroom
title: Jalousie
icon: mdi:window-shutter
badges: []
cards:
- type: custom:shutter-card
entities:
- entity: cover.shellyswitch_kueche_links
name: Küche links
buttons_position: right
title_position: top
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.helligkeitsautomatik_kuche_links
icon_height: 30px
theme: Mushroom
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.weihnachtsautomatik_kuche_links
icon_height: 30px
theme: Mushroom
- type: custom:shutter-card
entities:
- entity: cover.shellyswitch_kueche_rechts
name: Küche rechts
buttons_position: right
title_position: top
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.schliesse_jalousie_bei_sonnenuntergang
icon_height: 30px
theme: Mushroom
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.weihnachtsautomatik
icon_height: 30px
theme: Mushroom
The picture you posted contains 2 parts:
1.on the top:
shutter-card
conventional horizontal-stack (button, button)
…automatically moved to the next column:
shutter-card
conventional horizontal-stack (button, button)
2.stack-in-card (vertical mode):
— shutter-card
— stack-in-card (horizontal mode) (button, button)
— shutter-card
— stack-in-card (horizontal mode) (button, button)
Do you need to create the 2nd part?
Then will you be able to combine cards into a stack by yourself using my description?
maybe i didn´t get your point, but just put the cards in a vertical stack i guess.
this should work:
feel free to send me a DM if you got any questions (in german if you like)
views:
- theme: Mushroom
title: Jalousie
icon: mdi:window-shutter
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:shutter-card
entities:
- entity: cover.shellyswitch_kueche_links
name: Küche links
buttons_position: right
title_position: top
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.helligkeitsautomatik_kuche_links
icon_height: 30px
theme: Mushroom
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.weihnachtsautomatik_kuche_links
icon_height: 30px
theme: Mushroom
- type: custom:shutter-card
entities:
- entity: cover.shellyswitch_kueche_rechts
name: Küche rechts
buttons_position: right
title_position: top
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.schliesse_jalousie_bei_sonnenuntergang
icon_height: 30px
theme: Mushroom
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.weihnachtsautomatik
icon_height: 30px
theme: Mushroom
1 Like
Thank you mase, it works :)!
1 Like
Hi I want to use a custom:button-card within the stack-in-card
But it only shows the title, when I use a regular button card it shows the button
Also the code also works whan I use vertical-stack instead of stack-in-card
This is my code
type: custom:stack-in-card
mode: vertical
title: Test
cards:
- type: custom:button-card
entity: input_boolean.input_boolean_fan
name: ’ ’
styles:
card:
- height: 60px
state:-
value: ‘on’
color: lightgreen
styles:
icon:
- animation: |
[[[if (states['sensor.afzuiging_temperatuur'].state == '10') return "rotating 3s linear infinite"; if (states['sensor.afzuiging_temperatuur'].state == '50') return "rotating 1s linear infinite"; if (states['sensor.afzuiging_temperatuur'].state == '100') return "rotating 0.5s linear infinite"; ]]]
action: none
double_tap_action:
action: more-info
entity: sensor.afzuiging_temperatuur -
- type: horizontal-stack
cards:- type: custom:button-card
color_type: black-card
color: lightgreen
icon: mdi:fan-speed-1
styles:
card:
- height: 40px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.afzuiging
temperature: 10 - type: custom:button-card
color_type: black-card
color: lightgreen
icon: mdi:fan-speed-2
styles:
card:
- height: 40px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.afzuiging
temperature: 50 - type: custom:button-card
color_type: black-card
color: lightgreen
icon: mdi:fan-speed-3
styles:
card:
- height: 40px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.afzuiging
temperature: 100
- type: custom:button-card
what am I doing wrong
This is how it looks with vertical-stack
Thanks
Ron
hi Dave,
Is your message about my question? I am not asking for a helpdesk service. My question was that custom:button-card not seems to work with stack-in-card, i just tried to be complete by giving the code.
if it should work just tell me and I will try to find out why it does not work further.
Ron
The issue is that you didn’t format your code properly. Follow the link I posted to find out how to do it.
1 Like
Hi,
My first time posting on the forum, so please excuse me if I do something wrong.
I looked at every single post I could find and tried all sorts of combinations before posting on the forum.
I’ve stacked 5 custom buttons in a horizontal row by using the stack-in-card and the custom button card. Everything is working as expected and showing correctly.
The next step is to try and reduce the Title font size to 18px by using card-mod.
I’ve used card-mod on entity cards without any issues and I was able to reduce the font-size on these cards by using the card-header property.
As soon as I introcuce card-mod to my custom stack in card the custom buttons dissappear.
Image of the working code.
type: custom:stack-in-card
title: Underfloor Heating
mode: horizontal
keep:
margin: true
border_radius: true
cards:
- type: custom:button-card
color_type: card
entity: switch.uh_ensuite
name: Ensuite
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_hoofslaapkamer
name: Main Bedroom
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_spaarkamer
name: Spare Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_tv_kamer
name: TV Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_zac_kamer
name: Zac Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
Picture of custom mod-card with properties not working. Now this is probably due to my lack of knowledge, but according to me this should work. I’ve tried so many different options and can’t get this to work. If someone can please point me in the right direction.
(Tried to paste a screenshot but not allowed as a newbie.)
type: custom:mod-card
style:
stack-in-card$: |
.card-header {
font-size: 18px;
}
card:
type: custom:stack-in-card
title: Underfloor Heating
mode: horizontal
keep:
margin: true
border_radius: true
cards:
- type: custom:button-card
color_type: card
entity: switch.uh_ensuite
name: Ensuite
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_hoofslaapkamer
name: Main Bedroom
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_spaarkamer
name: Spare Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_tv_kamer
name: TV Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
- type: custom:button-card
color_type: card
entity: switch.uh_zac_kamer
name: Zac Room
show_icon: false
state:
- value: 'on'
color: orange
- operator: default
styles:
card:
- height: 80px
- font-size: 14px
- color: 212121
name:
- white-space: unset
card-mod thread → 1st post → link at the bottom → styles for stack-in-card
Thanks for the quick reply,
I worked through that thread and found the code I’m currently using. It is not working with stack-in-card.
If I change the stack in card to something else the card-mod code does work, so I don’t think it is a card-mod issue.
I’m having some issues getting my stack-in-card to not be a 50/50 split.
I have a mushroom template card and a mushroom chips card horizontally stacked - how can I do it so the card itself is more like an 80/20 split?
I want it to look like this:
But it looks like this when the screen size is smaller:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Office
secondary: |-
{% if is_state('light.office_2', 'on') %}
On
{% elif is_state('light.office_2', 'off') %}
Off
{% endif %}
icon: mdi:desktop-tower-monitor
entity: light.office
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.office_2', 'on') %}
orange
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.office_cupboard_door_sensor_contact
secondary: >-
{% if is_state('binary_sensor.office_cupboard_door_sensor_contact',
'off') %} Door Closed
{% elif is_state('binary_sensor.office_cupboard_door_sensor_contact',
'on') %} Door Open
{% endif %}
icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''grey'' }}'
icon: '{{ ''mdi:door-open'' if is_state(entity, ''on'') else ''mdi:door-closed'' }}'
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--chip-border-width: 0px;
alignment: end
card_mod:
style: |
ha-card {
background-color: {{ '#fedb68' if is_state('light.office_2', 'on')}};
--primary-text-color: {{ '#000000' if is_state('light.office_2', 'on')}};
border-width: 0px;
margin: 0px;
}
Any ideas please?
I’m trying to remove the border radius on the top of the “Lys” card. Outside of Stack in card it works, but not inside?
type: custom:stack-in-card
background: false
cards:
- type: custom:button-card
name: Lys
style: |
ha-card {
background: var(--background-color-2) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
I´m trying to get a sensor Date in the Title of the card but it doesn´t work
Example:
{{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)}}
Any idea?
Considering stack in card is a direct drop in replacement for vertical stack and vertical stack does not support templates, I don’t think stack in card will either…
You’ll need to wrap it in another card to add template support like custom:card-tenplater
1 Like
Does anyone know how to remove the 4px margin from around the stack in card? currently I am using a combination of stack in card & layout card to nest mushroom cards & custom buttons which is working perfectly, however when I then bring them into my normal cards the margin is causing them to not align. I have tried using card mod on the stack in card which doesn’t work (not unexpected). Any advice is appreciated.
Screenshot:
Stack-in card code:
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 4fr 1fr
cards:
- type: custom:mushroom-light-card
entity: light.aidans_lamp
fill_container: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: false
use_light_color: true
collapsible_controls: false
card_mod:
style: |
ha-card {
background-color: {{ 'var(--ha-card-secondary-background)' if
is_state('light.aidans_lamp', 'on') }};
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- light_chip
entity: light.aidans_lamp
icon: mdi:lightbulb
styles:
img_cell:
- background-color: rgba(255,237,222,0.2)
icon:
- color: rgba(255,237,222,1)
card:
- margin-top: 15px
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.aidans_lamp
data:
color_temp_kelvin: 5500
hold_action:
action: none
double_tap_action:
action: none
- type: custom:button-card
template:
- light_chip
entity: light.aidans_lamp
icon: mdi:lightbulb
styles:
img_cell:
- background-color: rgba(255,177,109,0.2)
icon:
- color: rgba(255,177,109,1)
card:
- margin-top: 15px
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.aidans_lamp
data:
color_temp_kelvin: 3000
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- light_chip
entity: light.aidans_lamp
icon: mdi:lightbulb
styles:
img_cell:
- background-color: rgba(0,224,255,0.2)
icon:
- color: rgba(0,224,255,1)
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.aidans_lamp
data:
rgb_color:
- 0
- 224
- 255
- type: custom:button-card
template:
- light_chip
entity: light.aidans_lamp
icon: mdi:lightbulb
styles:
img_cell:
- background-color: rgba(255,12,218,0.2)
icon:
- color: rgba(255,12,218,1)
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.aidans_lamp
data:
rgb_color:
- 255
- 12
- 218
I guess I have solved this for the time being, instead of having the other cards be separate to the layout card, I have just included them in the same layout card which has fixed the alignment issue.
Hi everyone, wishing you and everyone close to you a happy, healthy 2024!
I would like to have the temps/humidity from the rooms in 1 card so I’m trying to achieve this with this card.
This is what I have so far for a few rooms:
The problem is the border (horizontal line) between the name of the room and the data.
I would like to have this gone but tried all sorts of things that I’ve found but cannot get it removed.
type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: <font color=#5794f2 size="5">Bathroom</font>
- type: custom:button-card
tap_action:
action: none
aspect_ratio: 2/1
styles:
card:
- padding: 2%
- font-size: 20px
- text-shadow: 0px 0px 5px black
grid:
- grid-template-areas: '"temp temp" "hum hum"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
img_cell:
- justify-content: start
- align-items: start
- margin: none
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 28px; color: deepskyblue;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_temperature'].state}°c</span>`
]]]
hum: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 20px; height: 28px; color: deepskyblue;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_humidity'].state}%</span>`
]]]
Thanks a lot for helping me out!
ps: I’m also open for suggestions that might be better than what I’ve come up with
1 Like
Suggest to start testing with a simpler case:
type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: xxx
- type: custom:button-card
entity: sun.sun
and then increase your button step-by-step.
Actually, this is a common rule.