That’s odd. Remove “no default” from your config, but I don’t think that’s your issue.
- clock: 'notification'
type: 'custom:compact-custom-header'
user_agent: Android
What browser are you using to view home assistant on your phone?
Actually I see what you’re doing with the “no default” portion. It’s confusing, but it works. You could just put “none” instead.
Ok I’ve change to none.
But it does not solve my issue, tested on firefox and chrome on android.
Tested also on firefox on win10 with this config:
type: ‘custom:compact-custom-header’
clock: none
Try click and drag a view icon left/right. Some view icons will auto-hide like you showed when window width changes, but click/drag/move a tab icon will show the ‘hidden’ icons, tested on chrome, windows/android.
While this is true, the icons shouldn’t be cutting off as soon as they appear to from his gif.
@biau Please confirm you are using the latest version of the card and have done a hard refresh afterwards. Also, what version of HA are you on and do you use yaml mode or storage mode?
@JTPublic sure I know that I can scroll betweens tab icons using click hold but the area is really small even on a large phone.
@mayker using hass 0.86.3 and latest version from git of your code.
You’re right, it shouldn’t be as small as what you’re getting. Will look into this more after work.
Compact-custom-header was working fine until yesterday. Nothing changed so far as updates or new installs, but it just stopped working. Running Chrome, HA 0.86.4 and latest version of CCH. Getting the following error in dev console for Chrome.
compact-custom-header.js?v=0.2.9:58 GET http://192.168.1.10:8123/local/custom-lovelace/compact-header/compact-custom-header.lib.js?v0.2.9 net::ERR_ABORTED 404 (Not Found)
Also seeing a blank card on a couple of views, but not on others.
Blank card above Updates card
No blank card above first stack on left
All views are panel:true and CCH is first card INSIDE a container card. Also I have confirmed that all files are exactly where they are supposed to be.
Installed in Lovelace, storage mode, with hidden: true. The whole header no longer shows, as expected, so I can now use Lovelace in Kiosk mode (wall-mounted iPad). Now the question is: how do I get the header back once it’s gone? I’ve gone through all this thread and can’t find a way…
“Avoid using header: false unless you’re using yaml mode. Otherwise you’ll have no way to edit your config other than either deleting this cards files or editing .storage (which you shouldn’t do). Wait for expanding tab feature, coming soon.”
you could also just temporarily rename the folder that contains this card
I do not. the path should be local/custom-lovelace/resources/compact-header/ which is what I have reference in lovelace-ui.yaml
- url: /local/custom-lovelace/resources/compact-header/compact-custom-header.js?v=0.2.9
type: js
should I also create a reference for the .lib?
Found it!!! the reference in the yaml for the actual cards did not include “resources/”
Thanks, that worked. Wish there was a way to get in and out of this kiosk mode. It’s so convenient for wall-mounted displays!
It’s in the next version
Update!
Version 1.0.0b0
I need to say a huge “thank you” to @Bram_Kragten. He originally pushed for the rewrite of this card and has spent the last couple of weeks contributing, teaching, and being extremely patient with me.
Important Notes:
- This is a major update and everything should be considered a breaking change.
- This card should now be “type: module” in your lovelace resources.
- Having the card on each view is required, but made easier with config caching.
- Please, update manually. The card has been temporarily removed from custom-updater.
- The compact-custom-header.lib.js file is no longer used and can be safely deleted.
I expect there to be growing pains, please be patient as we work through them.
The Big Things:
- Editor UI: You can now use the editor to configure everything for this card.
- Configuration Caching: Set configuration for the first card and have it passed to all other views/cards. Set the card in the first view as the “main config”.
- Exceptions: Formally user_agents. Includes: username, user agent, and the new addition, CSS media queries.
- Exceptions Config: Configuration for exceptions has greatly improved.
- Overflow Option: Buttons can now be moved from the header into the options menu dropdown.
- Hide Tabs: Formally user_agent_views. You now list the tabs you wish to hide.
- Protection: If you hide the header or options menu you can use a URL paramater to disable CCH temporarily.
This is almost an entire rewrite and a completely different configuration setup, so be sure to read the readme and if you had open issues/problems with the previous version make sure to let me know if the issue still exists or has been solved in this version.
9 Likes
To save people scrolling and since the updater is disabled… https://github.com/maykar/compact-custom-header
1 Like
So I just get the spinning wheel of death when I try and edit the card.
I did delete the old card and the card is showing on all my views but I can’t configure it.
I did empty cache and hard reload
I am also getting the card appearing multiple times on some views?
Any errors? Did you download compact-custom-header-editor.js as well? What browser are you using?
I don’t see any errors… ah I don’t have the editor…
That was it… oops!