'keep: margin: false' is not respected for inserted stack

[ildar170975]

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser

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:

  - type: custom:stack-in-card
    mode: vertical
    keep:
      background: true
      box_shadow: false
      margin: false
      outer_padding: false
      border_radius: false
    cards:
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: red;
           }
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: green;
           }

But if the 2nd card is stack-in-card, then the margin is present anyway - look at the margin-top:

  - type: custom:stack-in-card
    mode: vertical
    keep:
      background: true
      box_shadow: false
      margin: false
      outer_padding: false
      border_radius: false
    cards:
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: red;
           }
     - type: custom:stack-in-card
       mode: horizontal
       keep:
         background: true
         box_shadow: false
         margin: false
         outer_padding: false
         border_radius: false
       cards:
         - type: entities
           entities:
             - sun.sun
           card_mod:
             style: |
               ha-card {
                 background-color: red;
               }
         - type: entities
           entities:
             - sun.sun
           card_mod:
             style: |
               ha-card {
                 background-color: green;
               }

Javascript errors shown in the web inspector (if applicable):
no

Additional information:

[ildar170975]

And same for border_radius: false - it is clearly visible if you specify margin: true:

[ildar170975]

Probably same reason as here:
#20

[ildar170975]

Seems that after 2021.12 functionality of "keep: margin: xxxx" gives erratic results if one stack includes another stack.

[BadgerLoaf]

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!

[ildar170975]

is there a workaround or an update on the issue?

Only by card-mod.
A required code depends on a particular case.

[BadgerLoaf]

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?

[ildar170975]

@BadgerLoaf
The post you mentioned does not seem to me related to the problem.
Could you re-ask your question again in that thread?

[BadgerLoaf]

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.

[ildar170975]

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.

[BadgerLoaf]

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?

[BadgerLoaf]

Hi @ildar170975 - Would you mind sharing your code as to how you removed this border? Thanks for your help!

[ildar170975]

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.

[BadgerLoaf]

@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!

[ildar170975]

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.

[BadgerLoaf]

@ildar170975 - Amazing, thank you! That card mod has worked and removed the gap caused by the margin.

Before:

After:

[ildar170975]

Same problems with box-shadow & border.

[wrouesnel]

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.