ha, don’t be too sure of that:
check bottom line…
1 Like
it can be dependent on custom header configuration, i have the same problem on 3 independent devices and 3 independent browsers
that is probably right.
And until the release of a fix, there’s nothing we can do though.
I’ve held back on updating my production system for these kind of issues on the .0 updates.
as CH is a priority plugin, I must wait until Ryan confirms the proper functionality…
Just did the update to 1.4.0 and now I get this on iOs
If i turn my phone sideways I get more icons but the screen is not filled. Wonder if this is related to the iOS 13.5 update that I did tonight or CH related. Works as normal in a browser.
Update
It appears that this weather option was causing it to fail
options: >-
<ha-icon icon='mdi:weather-{% if is_state("weather.dark_sky",
"partlycloudy") -%}partly-cloudy{%- else -%}{{
states('weather.dark_sky')}}{%- endif %}'></ha-icon>
{{states.weather.dark_sky.attributes.temperature }}°
Removed and all good now.
Hi,
I think that you are aware of this but thought to share anyhow.
I am on HA version 0.110.1 and custom header 1.4.3.
If I switch from developers tool (for example) to overview the custom header moves to the bottom of the fronted.
custom_header:
button_text:
options: '{{ hours24 }}:{{ minutesLZ }}'
exceptions:
- conditions:
user: bbbbb
config:
default_tab: '2'
show_tabs: '2'
- conditions:
user: zzzzzz
config:
default_tab: '2'
show_tabs: '2'
header_text: >-
<style> #flipper {color:#999;} #flip {height:24px;overflow:hidden;} #flip >
div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
#flip div:first-child {animation: show 10s linear infinite;} @keyframes show
{ 0% {margin-top:-144px;} 5% {margin-top:-96px;} 33% {margin-top:-96px;} 38%
{margin-top:-48px;} 66% {margin-top:-48px;} 76% {margin-top:0px;} 100%
{margin-top:0px;}} #flipper p {position:fixed;color:#999; } </style> <div
id=flipper><div id=flip><div><div> OutTemp:
{{states('sensor.outdoor_temperature_2')}}</div></div><div><div>
{{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
{{states('sensor.dark_sky_summary')}}</div></div><div><div> OutTemp:
{{states('sensor.outdoor_temperature_2')}}</div></div><div><div>
edit: with HACS version 1.0 custom header disappeared
Log Details (ERROR)
Logger: frontend.js.latest.202005191
Source: components/system_log/__init__.py:209
First occurred: 10:30:35 PM (5 occurrences)
Last logged: 10:41:47 PM
http://192.168.1.22:8123/hacsfiles/custom-header/custom-header.js:1:15444 Uncaught TypeError: Cannot read property 'setAttribute' of undefined
Posted this over on the Github issues page but I’ll post here to save you and maybe others some time:
If your issue is like mine then it’s because you have conversation: commented out in your HA configuration.yaml. Uncommenting it and restarting HA resolves this error for now but I’m sure maykar will address it properly when time permits. You can add voice_hide: true to your CH config to hide the icon for now.
3 Likes
Thanks, that helped for the time being
1 Like
thank you very much
1 Like
not sure what your issue is 
could it be this:
TypeError: undefined is not an object (evaluating 'e.voice.setAttribute')
same problem for me
Thank you SO MUCH mayker! Your last update 1.4.4 has fixed all issues I had for a long while! Thank you! Amen!
2 Likes
I’m getting the same (on 1.4.4):
custom_header:
button_text:
options: >-
{{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <ha-icon icon='mdi:weather-{%-
if is_state('weather.dark_sky', 'partlycloudy') -%}partly-cloudy {%- elif
is_state('weather.dark_sky', 'clear-night') -%}night {%- else
-%}{{states('weather.dark_sky')}}{%- endif -%}'></ha-icon>
{{states.weather.dark_sky.attributes.temperature }}°
compact_mode: true
hidden_tab_redirect: false
hide_help: true
I’ve tried adding things like style=‘width:24px; height:24px’ to the ha-icon, but nothing makes it any smaller.
1 Like
Why do I have this error although custom header is not installed?
ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/custom-header/custom-header.js' but it does not exist
Check your theme config. Last update broke lines with ‘paper-icon-size’. Replace ‘paper’ for ‘ha’ and set icon size there. Try ‘ha-icon-size: 1 em’ for example. If that doesn`t work try to add ‘!important’ after 24px (or 1em to be more responsive with your font and screen sizes)
Hi,
Same here on HA 0.110.1 and CH 1.4.4
The only way I can stop the icon from destroying all my views is to remove it by removing the ha-icon section from the custom header options in the lovelace yaml, then all is well.
I have this config in ui-lovelace.yaml file
custom_header:
background: 'rgba(155, 155, 155, 0.25)'
swipe_animate: fade
swipe_prevent_default: true
compact_mode: true
button_text:
options: >-
{{ dayNameShort }}, {{monthNameShort }} {{ dayNum }} <br>{{ hours12 }}:{{ minutesLZ }} {{ AMPM }}
# options: '{{ date }} {{ time }}'
voice_hide: true
Prior the .110 update, it is transparent that compliments the IOS theme.
After the upgrade, it is no longer transparent and the date is no longer visible.
Check your browser console for issues, what you see there is the default HA header.
you still have it listed in lovelace resources?
I deleted it, i don’t have this error anymore now but many buttons remains “invisible” in differents pages.
have you updated to the latest version of custom header, then re-added the resource back