Open ildar170975 opened 2 years ago
And same for border_radius: false
- it is clearly visible if you specify margin: true
:
Probably same reason as here: https://github.com/custom-cards/stack-in-card/issues/20
Seems that after 2021.12 functionality of "keep: margin: xxxx" gives erratic results if one stack includes another stack.
I am seeing this problem too, where I have two horizontal stacks contained within a vertical stack.
I see this issue been open for a long time, is there a workaround or an update on the issue?
Thanks for your help!
is there a workaround or an update on the issue?
Only by card-mod. A required code depends on a particular case.
Thanks @ildar170975, I thought that might be the case.
I've actually started trying to fix mine using card-mod
, as I have identified the issue in my case. Though am struggling with my skill (or lack of it!) to get the code right.
Have asked for help from the community here https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3799, hoping someone will be able to point me in the right direction.
Don't suppose you have any ideas?
@BadgerLoaf The post you mentioned does not seem to me related to the problem. Could you re-ask your question again in that thread?
Sorry @ildar170975 if I have misunderstood something, but the issue I'm seeing is where I have two horizontal stacks within a vertical stack (using custom:stack-in-card) and this causes a gap between the two horizontal cards.
Looking at the inspect code below, I have identified that I need to replace display: flex
with display: block
in the #root
level highlighted below. If I change this within the inspect view, it fixes the issue.
Is this not the same issue you were seeing? Apologies for highjacking the thread if not.
My issue can be seen here:
There is a gap between 1st top card and the 2nd bottom card (which is a horiz stack).
And this gap only occurs when the 2nd card is a stack.
So I have to remove this margin manually.
And I do it just by explicitly defining zero margins, not by changing a display
property.
Thanks @ildar170975.
I believe we are seeing the same issue (having a horizontal stack inside a vertical one).... though sounds like you have found an easier way to get around it, than my idea of changing that display property.
Would you mind sharing your code on how you changed to the margin to get around the issue?
Hi @ildar170975 - Would you mind sharing your code as to how you removed this border? Thanks for your help!
how you removed this border?
Sorry, I do not understand. You are talking about a border - but this issue and my picture above are about a margin. I have a solution for a margin only. As for borders - I just killed them on a theme level, do not use borders at all.
@ildar170975 Apologies, you are right, it's a margin issue, not the border. I didn't use the correct words.
Like you I am seeing the margin of 4px...
What was your solution to remove the offending margin?
Thanks again!
Seems that stack-in-card
is abandoned by its author and have to be fixed by card-mod.
This became worse after 2022.11.
W/o card-mod fix:
type: custom:stack-in-card
mode: vertical
title: title
keep:
margin: false
border: true
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
- type: custom:stack-in-card
mode: horizontal
title: title
keep:
margin: true
border: true
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
With card-mod fix:
type: custom:stack-in-card
mode: vertical
title: title
keep:
margin: false
border: true
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
margin: 0px !important;
}
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
- type: custom:stack-in-card
mode: horizontal
title: title
keep:
margin: true
border: true
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
Yes, there are still ugly round corners on the internal stack. Need to be also fixed by card-mod.
@ildar170975 - Amazing, thank you! That card mod has worked and removed the gap caused by the margin.
Before:
After:
Same problems with box-shadow & border.
For anyone finding this, the solution for getting a clean no borders with this plugin and card mod is:
- type: custom:stack-in-card
title: Air Conditioners
mode: vertical
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
margin: 0px !important;
--ha-card-border-width: 0;
}
# elided the rest of the config...
Before:
After:
EDIT: Probably need to tweak the paddings to get it seamless, but you get the idea.
Checklist:
Release with the issue: 0.2.0
Last working release (if known):
Browser and Operating System: Chrome, Win10x64
Description of problem:
If the 'keep: margin: false' is set then the margin between card is supposed to be 0. It works for two Entities cards:
But if the 2nd card is
stack-in-card
, then the margin is present anyway - look at the margin-top:Javascript errors shown in the web inspector (if applicable): no
Additional information: