I had upgraded to 0.107.6 and had this problem. Even after downgrading to 0.106.x the problem persists. Just a heads up for anyone else that might try and downgrade due to this bug, it won’t fix it.
You can see on the immediate page load things are where they should be but quickly snap back to one long column
could someone send a code snippet on how to align for example 3 entities (horizontal) to the same size and centered?
well, you’re supposed to add cards to this stack, not entities.
so here’s an example using Entitie card
type: custom:stack-in-card
mode: horizontal
cards:
- type: entities
entities:
- sensor.1st_floor_bathroom_humidity
- type: entities
entities:
- sensor.1st_floor_bathroom_humidity
- type: entities
entities:
- sensor.1st_floor_bathroom_humidity
and this one uses button-card
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:button-card
entity: sensor.1st_floor_bathroom_humidity
- type: custom:button-card
entity: sensor.1st_floor_bathroom_humidity
- type: custom:button-card
entity: sensor.1st_floor_bathroom_humidity
Thank you. i found out, that the settings i made at the button-card template are the reason for the not centered cards… ive to take a look at this first.
If anyone has some hints for a general template setting for the button-card to get 3 or 4 cards all the same size and also centered with a little space between each other, i would appreciate it.
@AhmadK , thank you again for the help!
here’s my stack-in-card with 6 button-cards - not exactly what you’re asking for but won’t it do the trick?
mhmm looks pretty centered. at mine it isnt… especially if i use a tablet / smartphone… if i use 4 entities, the last one isnt even visible 
therefore there should be some setting which i made wrong, but im not that into css ^^ so maybe ill figure this out while testing ^^
As I said, it’s a stack-in-card (mode: horizontal) with 4 similar button-cards, not 1 button-card.
Try it.
If you set a width to your button card, it is expected that they do not resize automatically 
, else they should be displayed all 4.
Hi, I have the issue that the border (& radius) disappear when I make use of the --keep-background option. Opened also an issue on github: https://github.com/custom-cards/stack-in-card/issues/1
Is this a simple fix?
Is it possible to modify the spacing between two horizontal stacks in a stack-in-card?
Right now, it’s not, but can you show me what you are trying to achieve?
I love the idea of the stack-in-card, but imho the spacing is too compact, especially when you make use of horizontal-stacks in the stack-in-card. I like to achieve this:
Alright I see, let me add this feature 
- type: custom:stack-in-card
mode: horizontal
keep:
box_shadow: true/false
margin: true/false
border_radius: true/false
background: true/false
outer_padding: true/false
true (and outer_padding to false), it is the equivalent of a standard vertical-stack or horizontal-stack. The default is false.stack-in-cards together:
@RomRider Thanks again for another great project !!! 
Excited to see you have jumped into this one 
, as you actively maintain your repos 
Have you had a chance to consider GitHub Sponsors? Would love to add you to my list of devs for monthly support.
Whoop whoop, that’s fast! 
Thanks a lot!
I’ve changed a lot of my Lovelace to use this card so clearly like it! Thank you!
However I think I have been achieving what this latest release brings by using mod-card by @thomasloven
- type: custom:mod-card
style: |
ha-card {
margin: 0em 1em 1em 1em;
}
card:
type: horizontal-stack
I like the idea of reducing the number of custom cards I use because it feels right, but is there really any benefit to doing so?
If so, I could replace the use of card-mod with stack-in-card but would you be able to make the size of the outer_padding user configuable?
You can achieve pretty much anything with card-mod but it’s not for the faint hearted
I’ll add the possibility to configure the outer_padding size
I’m getting some errors in the log which appear to be caused by this card. Everything displays correctly but whenever I do a refresh (from the browser e.g. F5, not the Lovelace Refresh) I get this error in the log:
http://192.168.1.25:8123/frontend_latest/chunk.ea4a8xxxxxxxxx6f48.js:795:320 Uncaught TypeError: Cannot read property 'replaceChild' of null
and this is in the browser console:
The config causing this is:
type: conditional
conditions:
- entity: input_boolean.irrigation_show_rainfall_settings
state: "on"
card:
type: custom:stack-in-card
cards:
- type: entities
entities:
- type: divider
style: >
ha-card {
margin-top: -0.5em;
margin-bottom: -1em;
}
#=== General Rainfall Settings
- !include
- ../includes/titles.yaml
- title: General Rainfall Settings
font_size: 18px
font_family: Oswald
color: var(--secondary-text-color)
margin_bottom: -1.5em
margin_left: 0.5em
titles.yaml is:
# lovelace_gen
type: markdown
style: |
ha-card {
font-size: {{ font_size | default('20px') }};
font-family: {{ font_family | default('var(--primary-font-family)') }};
color: {{ color | default('auto') }};
height: {{ height | default('3em') }};
background-color: {{ background_color | default('transparent') }};
margin-top: {{ margin_top | default('-0.5em') }};
margin-left: {{ margin_left | default('-0.5em') }};
margin-bottom: {{ margin_bottom | default('-0.5em') }};
box-shadow: none;
}
content: {{ title }}
As I said it displays perfectly:
This error is on the frontend side. hui-stack-card.ts is a frontend file. I understand that this card can generate this error but it’s not something I can fix on the card itself.