Home Assistant 2022.11 compatibility

[ov1d1u]

Home Assistant 2022.11 added borders around cards. This PR comes with the option to hide them.

[piitaya]

I think we can also edit the readme to add the new keep option.

[ov1d1u]

@piitaya Added, thanks for pointing it out!

[Getslow6]

@piitaya or @ov1d1u, do you know if its possible to get the resulting stack-in-card.js file (or contents in a pastebin?) without waiting for the new release? I tried making the edits in my local file based on your source edits, but the release pipeline obfuscates the code and I'm not that experienced in javascript to be able to edit it myself 😅

[ov1d1u]

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

[Rudd-O]

Can this please be merged? Thansk.

[Rudd-O]

Uh oh the documentation README has not been updated!

[correctomundo79]

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Thanks for this! I'm just wondering what the exact syntax would be to prevent borders on child cards. I assume:

type: custom:stack-in-card
mode: vertical
keep:
  - border: false
cards:

but that doesn't seem to work?

[Getslow6]

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Thanks for this! I'm just wondering what the exact syntax would be to prevent borders on child cards. I assume:

type: custom:stack-in-card mode: vertical keep:

• border: false cards:

but that doesn't seem to work?

Try removing the cache of your browser (not just reload). You don't need the keep section, so:

type: custom:stack-in-card
mode: vertical
cards:

[correctomundo79]

Try removing the cache of your browser (not just reload). You don't need the keep section, so:

type: custom:stack-in-card
mode: vertical
cards:

Nope, tried that already, but no difference. Thanks anyway.

[strikeir13]

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

I overwrote the existing stack-in-card.js file with this one, cleared my browser cache, and tried many combinations of keep: but nothing worked. Are there any other steps required to make this work?

[ronaldheft]

@strikeir13 Are you using HACS? Do you have a *.js.gz file in the folder?

If so, you need to delete that, as HACS will serve up the gzipped version. After deleting the file, clear your cache again.

[strikeir13]

@strikeir13 Are you using HACS? Do you have a *.js.gz file in the folder?

If so, you need to delete that, as HACS will serve up the gzipped version. After deleting the file, clear your cache again.

That did it! Thank you!

[Rudd-O]

What's preventing this from getting merged? Can I be added to the reviewers list? Thanks.

[amjidkhan]

Any idea when this will be merged?

[amjidkhan]

https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Can you advise a novice user the steps?

[almighty059]

@Getslow6 I uploaded your compiled .js file from your repository and it works to remove the borders but can I use the keep: feature to keep the border? It doesn't seem to be working although I'be never really had any luck using that feature. Thanks.

[ov1d1u]

@Rudd-O I also updated the README.md file a while ago to reflect the new border options, is there something I have missed?

[almighty059]

@ov1d1u the border: feature is working for me but when I try to use the keep: feature and set the border or something else to true it does not work. I don't know if I'm using the wrong syntax or exactly what wrong but I can't get a value of true to work for anything within the keep: feature. The README.md file has as long as I known never had an actual example of it being used. The only example that it has is of how to use the --keep-background: feature for a specific entity. Could you also possibly add that to the README.md file and double check to see if it's actually working.? Thanks.

[ov1d1u]

@almighty059 I think you misunderstood the documentation a bit. The example given here regarding how to use --keep-background only applies to a card of type custom:button-card. The right way to use the keep object is somethink like this:

type: custom:stack-in-card
title: My Stack In Card
mode: vertical
keep:
  border: true
cards:
  - type: horizontal-stack
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: sun.sun
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - sun.sun

Anyway, I added support for the --keep-border css variable, to use it you should do something like:

type: custom:stack-in-card
title: My Stack In Card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sun.sun
        styles:
          card:
            - '--keep-border': 'true'
      - type: button
        entity: sun.sun
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - sun.sun

I also updated the documentation to reflect the usage of the keep object, even if it goes a little beyond the scope of this PR.

[almighty059]

@ov1d1u thanks for the reply. Just to clarify, I was referring to the code in your keep: example (outside the stack), not --keep-background (inside the stack). It has never worked for me because I never knew the correct way to implement it. I've tried various ways by changing where I put it, how I indented it, putting a - before it, putting a ; after it, etc. but nothing ever worked. After seeing your example, I finally know the correct way to use it and now it works. That's also what I was referring to when I said that there is no example of how it's used (outside of the stack) in the README file. The only example shown is --keep-background which is for when it's used inside the stack. Thanks again for the help and I apologize for straying outside the scope of the PR.

[ildar170975]

This fix does not solve problems with a case "a stack inside another stack"- see https://github.com/custom-cards/stack-in-card/issues/51

[ViktuK359]

What am I doing wrong, I installed "custom:stack-in-card" it through HACS and gives it out when filling out the card Custom element doesn't exist: stack-in-card

[bokub]

It looks like this PR will never be merged, so I decided to remove the borders myself with some CSS, and it's actually very easy, you just need to install the Mod Card, and add the following to every stacked card:

type: custom:stack-in-card
+ card_mod:
+   style: 'ha-card {--ha-card-border-width: 0}'

Before	After
type: custom:stack-in-card cards: ... ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ	type: custom:stack-in-card card_mod: style: 'ha-card {--ha-card-border-width: 0}' cards: ...

[Rudd-O]

Why will this PR not get merged? It should!

[bokub]

Why will this PR not get merged? It should!

I'm just guessing based on the fact that this repo's last commit was in 2020

[Rudd-O]

Does anyone know what happened to the maintainer of this project?

[ncd7]

Any news on probability of this getting merged?

[Kalitsune]

There's no maintainer unfortunately, the project isn't maintained since 2020 according to the README.md :(

The community is still pretty active with this card thought and there's a few PR fixing the principal bugs so if someone want to make a custom repo to do the aggregation of all of these changes I think it would be pretty useful and would not require a lot of time and efforts

[ildar170975]

@ov1d1u Hi. I do see --keep-border working in this config (similar to your example):

  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        entity: sun.sun
        styles:
          card:
            - '--keep-border': 'true'
      - type: custom:button-card
        entity: sun.sun

The upper button definitely has own border:

But I cannot use --keep-border with other cards like standard Entity, History-graph:

  - type: custom:stack-in-card
    cards:
      - type: entity
        entity: sun.sun
        card_mod:
          style: |
            ha-card {
              --keep-border: true;
            }
      - type: entity
        entity: sun.sun

as well as with

--keep-border: 'true';

Does it mean that your added --keep-border may only be used with a custom:button-card?

The earlier added --keep-background does work with standard cards as well.