broyuken
commented
9 months ago I'm having similar issues, I have a config that will center text in a picture-elements card that only sometimes works. Sometimes it centers the text, sometimes it defaults to left aligned. Here is my card config. All I do to "fix" it is refresh multiple times and 1/5 times it will display correctly. Happens on the web, and in the app. Cleared cache, reinstalled apps, nothing seems to make it consistently work.
type: picture-elements
elements:
- type: conditional
conditions:
- entity: person.brian
state_not: home
elements:
- type: image
entity: person.brian
image: local/media/images/PeopleImages/Brian.jpg
style:
top: 50%
left: 50%
width: 100%
height: 100%
filter: saturate(30%)
- type: conditional
conditions:
- entity: person.brian
state: not_home
elements:
- type: image
entity: person.brian
image: local/media/images/PeopleImages/Brian.jpg
style:
top: 50%
left: 50%
width: 100%
height: 100%
filter: saturate(0)
- type: image
entity: person.brian
image: local/media/images/PeopleImages/person_background.png
style:
top: 50%
left: 50%
width: 100%
height: 100%
opacity: 0.5
- type: state-label
entity: sensor.places_brian
style:
top: 81%
left: 50%
width: 100%
color: white
font-size: 1.2em
card_mod:
style: |
div {
white-space: unset !important;
text-align: center !important;
}
- type: conditional
conditions:
- entity: person.brian
state_not: home
elements:
- type: state-label
entity: sensor.brians_iphone_travel_time
suffix: ' from home'
style:
top: 96%
left: 50%
color: white
font-size: 1.0em
image: local/media/images/PeopleImages/Brian.jpgThis is how it looks when it's broken.
And this is how it looks when it works right.
tbrasser
mainTAP
rubin110
julienaltieri
My Home Assistant version: 2024.1.5 Frontend: 20240104.0
My lovelace configuration method (GUI or yaml): lovelace_gen
What I am doing: lots of card_mod and some mod-card usage.
What I expected to happen:
Card mod applying consistently:
What happened instead:
See screenshots:
I just noticed that at least on my desktop browser (where it also happens, and I was looking into the browser console) after a while (like more than a minute) the problem seems to go away, but only for that view.
Also the problem appears sometimes only on certain views and not in others (inconsistent which).
Minimal steps to reproduce:
Unsure, have tried clearing cache on affected devices. It doesn't seem to happen on ios companion app but does happen on my android 14 phone companion app and on tablets running fkb. Made sure all style keys are wrapped with card_mod:.
Here is my config: https://github.com/tbrasser/config
Error messages from the browser console:
Lots of this, but not sure if related:
By putting an X in the boxes ([]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
Important note I forgot to add, closing companion app and starting it again always solves it, and it comes back only after I left the dashboard (different app or for example home assistant settings). Same on fsk, reloading start url works, albeit temporarily.