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).
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
Or you can also forego stack-in-card and use layout-card with even more flexibility.
I don’t need flexibility I need simplicity, the layout card seems fairly complicated.
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)
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
Thank you mase, it works :)!
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:
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";
]]]
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.
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?