2024.3: Margins between cards became not controllable

[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 122.0.6261.112 , Win10

Description of problem:

In 2024.3 was changed a code for stacks in HA. Probably because of this in stack-in-card margin between cards became always set independently on a value of keep::margin.

Consider a code:

type: custom:stack-in-card
keep:
  margin: false
  background: true
cards:
  - &ref_card
    type: button
    entity: sun.sun
    card_mod:
      style: |
        ha-card {background: red;}
  - *ref_card

<!-

Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description. -->

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

Additional information:

[stickpin]

Replace your existing stack-in-card files in /www/community/stack-in-card/ folder and have fun. :)

stack-in-card_for_hass_2024.3.zip

The fix is overriding a gap style property introduced in Home Assistant 2024.3. The fix itself is just one line in the _updateChildren function. t.shadowRoot.getElementById("root").setAttribute('style', 'gap:var(--vertical-stack-card-gap,var(--stack-card-gap,0px)) !important');

Enjoy! ☺️

[ishu1976]

Hi, I have replaced the stack-in-card files as suggested (I have downloaded the zip file). I have rebooted my system, clean cache but the gap problem still remain. Someone know a solution?? Thank you

[stickpin]

@ishu1976 try to change hacstag value in the Dashboard Resources, to clean the internal HA cache. It should be something like this: /hacsfiles/stack-in-card/stack-in-card.js?hacstag=934983398439

[ishu1976]

@stickpin Thank you!!!! Perfectly solved!!!

[ildar170975]

@stickpin Suggest you to create a PR with your proposals.

[stickpin]

@ildar170975 unfortunately, it seems like the repo is no longer maintained. @ov1d1u also provided some fixes more than a year ago and it was never merged (https://github.com/custom-cards/stack-in-card/pull/47). I did fork from @ov1d1u repo and applied my fix as well. If you want you can add it as a custom repo in the HACS and install v0.2.3 with the fix: https://github.com/stickpin/stack-in-card

[ildar170975]

@stickpin That "border" fix is not exactly a "fix" since even with this fix I still see erratic issues.

I checked a code in your repo. I am not an expert in frontend api so could judge these changes in a wrong way. The "gap" attr is added in an _updateChildren method; is it a proper place?

[stickpin]

@ildar170975 let's put it this way... it works for me and I am happy with the result. no one stops you provide your own fix. 😉

[ildar170975]

You answered to someone else's question, not mine. No problem ).

[AINER]

To remove the gap you can use the variable that appeared with the update:

  card_mod:
    style: |
      ha-card {
        --stack-card-gap: 0;

Or you can add this variable to the theme you are using globally

[ildar170975]

card_mod:

It is definitely may be fixed by card-mod. The thing is to fix it on the card's level to avoid transition.

theme

Then all your standard stacks will become gapless as well.

[AINER]

Maybe use transition: none?

[ildar170975]

transition: none

Does not help. In fact, ALL controlled properties - padding, background, margin, box-radius (+ added border after 2021.x) - have a transitional effect w/o using card-mod, i.e. by default. Even on a fast PC. And using card-mod for these properties makes it a bit worse. This effect may be reduced a little by hacking a JS code - reduce a timeout "500" -> "100" in some places.

[kovacsla]

Replace your existing stack-in-card files in /www/community/stack-in-card/ folder and have fun. :)

stack-in-card_for_hass_2024.3.zip

The fix is overriding a gap style property introduced in Home Assistant 2024.3. The fix itself is just one line in the _updateChildren function. t.shadowRoot.getElementById("root").setAttribute('style', 'gap:var(--vertical-stack-card-gap,var(--stack-card-gap,0px)) !important');

Enjoy! ☺️

It works, perfect, thx :)

[sezlony]

the fix didn't work as expected, still having those ugly gaps 😞

ok, an other change in the frontend promted the fix to work, now it's good

[trisweb]

If you have card-mod installed, then you can add a global, scoped variable change to your theme to resolve this gap.

card-mod-card: |
  .type-custom-stack-in-card {
    --stack-card-gap: 0;
  }

This should remove the gap for all stack-in-cards without impacting regular vertical stacks.