Compact Custom Header

@klogg @mightydread @jimz011

Try the latest version and please provide troubleshooting info for me:

Errors in HA logs and Chrome Dev Tools (F12), browser you are using, config for card, and confirm that you have cleared your cache and refreshed.

That error wouldn’t be related

I use customcards so usually it shouldn’t be cached. Though I get this:

Edit: picture removed

I did this on a new browser (incognito mode and never opened before on this browser). But it has the same error as the app. Though, there are no errors in the logs!

Edit: I don’t have access to a computer now, will check that later!

You can explain or share - how you added the amount of emails to each of you.

I use Firefox version 66.0.5 and cleared cache cookies and restarted the browser still same error.
Frontend JavaScript version: latest

card config:

      - type: 'custom:compact-custom-header'
        clock_am_pm: false
        clock_date: true
        clock_format: '24'
          - conditions:
              user: Mighty
              clock_format: '12'
              hide_tabs: '10'
              menu: show
              options: show
              show_tabs: '1,2'
        hide_tabs: '1,2'
        main_config: true
        menu: hide
        options: clock

HA log:

2019-05-15 19:39:53 ERROR (MainThread) [frontend.js.latest.201904270] SyntaxError: fields are not currently supported

Firefox console has the same error:

SyntaxError: fields are not currently supported compact-custom-header.js:1057:4
1 Like

Sure, you can check my thread/repo here:

I will be releasing my new lovelace setup tomorrow, but you can find all of my previous setup here now, it includes the mail sensor!

Just pushed a release to address “SyntaxError: fields are not currently supported”


1 Like

Ok, after some more testing, it seems that /customcards/ do not work with this card, changing the version number in ui-lovelace.yaml solved it for me. Thnx for the new updates btw!

can confirm that it’s working now… thank you for the fast fix.

1 Like

I don’t understand what you are asking.

1 Like

CCH should work with /customcards/ just fine (it’s how I use it), seems like you may have had some caching issues.

Hey I’m having a strange interaction with the swipe element. I’m on version 1.0.3b4, on an android device, I have swipe animations on, and swipe wrapping. I also just cleared the cache and it still happens. It all works fine unless I swipe in the header area. I will get the animation of a swipe but the tab stays the same. Its just a strange thing going on. I haven’t yet tried without any of my previous CCH settings moved back to default though.

Swiping on the header is disabled to not interfere with swiping through tabs when you have too many tabs to fit on one screen, but the animation should be disabled as well so I’ll need to fix that.

I do have something to report though, on this version, whenever I refresh the app it will look like this (it is gone after a swipe though, but on older versions this did not happen).

There is a huge gap between the header and the first card (it is gone after I switch view)

Does this only happen in iOS app or in browsers too?

I experience also a strange behaviour the first tab and the hamburger menu icon are combined. And there is also a big gap between the header and the rest of the page. I am on all the latest MacOS and iOS versions and cleared caches, restarted, etc.

1 Like

I’m not being rude or terse, I just think this will be easier if I just provide as much info as I can and keep ‘commentary’ to the minimum.

My config is in a separate file and included at the very end of the config for tab 0:

  #=== Compact Custom Header Card
  - !include compact-custom-header.yaml

  type: custom:compact-custom-header
  main_config: true
  # background: var(--primary-background-color)
  active_tab_color: yellow
  tab_indicator_color: yellow
  notify_indicator_color: yellow
  notify_text_color: black
  menu: show
  voice: clock
  options: show
  notifications: show
  clock_format: 24
  clock_date: false
  # date_locale: en-gb

    - conditions:
        user_agent: Mobile
        voice: hide

    - entity: notifications
        state: false
          hide: true

I experience the same big margin on first load as @jimz011 and it only goes away if I Refresh from the top right menu.


I have tab0 and the left menu in the same position

I do not get the time and neither is the voice icon hidden

I also get some strange positioning on other views but am less concerned about those right I am guessing they are simply relics from these other behaviours .

I am on the latest version, have no errors that I can see in the HA logs or Chrome Dev Tools (F12)


I hope this helps and let me know if there is anything I missed.


HI, thanks for adding customizing the menu icons!
trying the template you provided, i receive this error, and no icon is displayed, merely the name:

config on the home page:

  - type: custom:compact-custom-header
    main_config: true
    header: true
    menu: show
    options: show
    chevrons: true
      - conditions:
          user_agent: iPhone
          menu: hide
          notifications: hide
          header: true
          options: hide
            icon: >
              if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
              else if (entity['sensor.family_home'].state == '1') 'mdi:account';
              else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
              else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
              else 'mdi:account-group';

btw are you sure we need else if? Ive never used that before in the JS customizing, always only if for each line , and final line simply uses return (no else is required)…

Tried it on ios safari and firefox (havent tested a proper pc browser yet but it shows the same gap.

@Mariusthvdb For the icon issue, make sure the tab you are adding an icon to already has an icon and not just a title. Will look into the array.length error. For the template, it’s just JavaScript so you can use ternarys, multiple if statements, if else, etc. In your particular case, else if is the best option so you can have that fallback else statement.

@klogg Thank you for the thorough reply rest assured I’m on the case, as I’m sure you’ve seen your not the only one with the issue. Bear with me.

@ramonvanbiljouw @jimz011 Seems to be the same issue as @klogg, looking into it.