Glitches with in_card and Home Assistant 2022.11

[McGiverGim]

The problem

With latest Home Assistant, there are glitches where the cards join. Here a capture of three cards in one:

What version of Canary has the issue?

0.3.4

What version of Home Assistant are you running?

Home Assistant 2022.11.1

What version of the Frontend are you running?

Frontend 20221102.1

Example YAML snippet

Any with `in_card: true`

Anything in the logs that might be useful for us?

Nothing

Additional information

None

[bedson87]

yup - custom-cards/stack-in-card#47

[birdwing]

Issue also appears with the no_card option as well.

[iMiMx]

So it looks like we probably need a 'border: none' in:

https://github.com/jcwillox/lovelace-canary/blob/main/src/const.ts

So we end up with something like:

<ha-card style="box-shadow: none; background: none; border: none;">
.....
</ha-card>

[iMiMx]

As a workaround, you can use the following in Lovelace:

canary_style:
  border: none;

Full example, where I had a horizontal line going through the 'boost' buttons:

cards:
  - entity: climate.hallway
    name: Hallway
    control: false
    step_layout: row
    type: custom:simple-thermostat
  - buttons:
      - entity: script.hallway_heating_boost_1hour
        icon: mdi:clock-time-one
        name: +1 Hour
      - entity: script.hallway_heating_boost_2hour
        icon: mdi:clock-time-two
        name: +2 Hour
      - entity: script.hallway_heating_boost_cancel
        icon: mdi:close-circle
        name: Reset / Cancel
    type: custom:paper-buttons-row
  - entities:
      - style:
          height: 20px
          margin-left: auto
          margin-right: auto
          width: 80%
        type: divider
    type: entities
    canary_style:
      border: none;
type: vertical-stack
in_card: true

Before:

After:

[jcwillox]

Yeah, this is definitely an issue, I'll try to get it fixed soon 👍

[McGiverGim]

Some news about that @jcwillox ?

[jcwillox]

Yeah very sorry that it's taken so long, I have been very busy with the job I just started + other things, I was planning to sort it out this weekend but there was a breaking change with HA 2022.12 for my other plugin paper-buttons-row, which took priority as there was no simple fix for it. That's done now so hopefully the canary fix will be out tomorrow night.

It also took a little longer as there hasn't been a release since I migrated the codebase to typescript so I need to make sure I didn't break anything back when I did that.

(Honestly no idea where the last month went 👀)

Just a reminder to anyone that stumbled upon this, that this will temporarily fix the issue

canary_style:
  border: none

[jcwillox]

So I've released 0.4.0 which should fix the issues with in_card and no_card, let me know how it goes 👍. Now that the Typescript change has been released future updates should be a lot quicker.

I thought I'd also mention that it appears custom-cards/stack-in-card is no longer maintained and if you are looking for a dedicated stack-card that supports the UI editor ofekashery/vertical-stack-in-card looks like a good alternative.

[pplucky]

So I've released 0.4.0 which should fix the issues with in_card and no_card, let me know how it goes 👍. Now that the Typescript change has been released future updates should be a lot quicker.

Quick test on in_card seems to work fine.

[birdwing]

Seems to have fixed the issue for me thanks 😁

[lublak]

@jcwillox i think its the same issue again with the latest version, tested with: 2024.8.2
Same fix does also works :)

canary_style:
  border: none