lovelace-canary
lovelace-canary copied to clipboard
Custom custom:canary-card doesn't work as expected
The problem
If canary
is not loaded into browser resources yet – styles are not applied. Fresh loads, without cached assets, always causes style
not being applied to the card. This is expected. Another refresh (without cache clearing) makes cards looks good, with styles applied. (Look more details below.)
To solve this issue I guess that custom:canary-card
was introduced. Unfortunately this card doesn't work as expected, producing:

What version of Canary has the issue?
0.4.0
What version of Home Assistant are you running?
2022.12.8
What version of the Frontend are you running?
20221213.1 - latest
Example YAML snippet
# I have a complex vertical-stack like this:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
- type: custom:mini-graph-card
entities:
- entity: ...
...
style: |
...
Anything in the logs that might be useful for us?
No response
Additional information
Without custom:canary-card
.
Fresh load:

After refresh:

I get the exact same issue you are seeing.
type: custom:canary-card
card:
type: vertical-stack
in_card: true
cards:
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.tomorrow_io_the_browns_daily
no_card: true
- type: entities
entities:
- type: section
label: Weekly Forecast
show_header_toggle: false
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.tomorrow_io_the_browns_daily
- type: entities
entities:
- type: section
label: Hourly Forecast
show_header_toggle: false
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.tomorrow_io_the_browns_hourly
If I edit the card in the dashboard by adding and removing a space ( not making any actual changes just need the save button to work) the error goes away, until the next time I open home assistant, then it's broken again.