Compact Custom Header

[mayker (maykar (pronounced "maker" with a southern accent))]

Then update manually. Follow the instructions in the readme on how to do so. The readme also contains helpful information like how to use this card with panel view.

[mayker (maykar (pronounced "maker" with a southern accent))]

Looking back on your previous code it seems I missed that you had this inside a custom layout card, sorry bout that. In that case your original code would work. Your only issue seems to be the fact that you’re using an old version of the card. You either need to update manually or you need to manually increase the version number in your resources. I don’t know why tracker card isn’t working for you, but in 0.84+ tracker card no longer automatically edits resources for you unless you’re in yaml mode (but it appears that you are?).

[Jokerigno]

@Jokerigno

title: Casa views: - title: At a glance id: home panel: true icon: mdi:home cards: - type: custom:layout-card cards: - type: custom:compact-custom-header - type: horizontal-stack cards: - type: picture-entity title: Irene entity: sensor.irene_status image: /local/irene.jpg - type: picture-entity title: Marco entity: sensor.marco_status image: /local/marco.jpg

Ok i restored the old code and updated the js files. Now it works. Thank you!

[akkaria (Adam)]

Is there a way to move the header to the bottom aka a footer?

Id like to do this particularly for my iPhone as its easier to use it one handed if the views are at the bottom.

[teachingbirds (Isabella Gross Alström)]

I’m having trouble with some (more heavy) views not loading at all on mobile, just the custom header shows up and beneath that it’s empty. Everything works fine on desktop. Can I do something to remedy this or maybe help you figure out why in some way?

[iantrich (Ian)]

stop breaking everything!

[teachingbirds (Isabella Gross Alström)]

I’m only load testing for you

[mayker (maykar (pronounced "maker" with a southern accent))]

Can you confirm the issue exists when not using custom compact header or only when using it?

[mayker (maykar (pronounced "maker" with a southern accent))]

Not currently, but this is something I’ll look into

[teachingbirds (Isabella Gross Alström)]

Yes, I just commented it out in the views and then everything works.

[mayker (maykar (pronounced "maker" with a southern accent))]

Will check it out. Is there anything in common with the views that won’t display, are they using the same type of cards, etc.?

[teachingbirds (Isabella Gross Alström)]

It was this view (also added a couple of mini graph sensor cards after committing this, but I tried removing them again and it was the same): https://github.com/isabellaalstrom/HomeAssistantConfiguration/blob/master/lovelace/30_system_info_view.yaml
and this view: https://github.com/isabellaalstrom/HomeAssistantConfiguration/blob/master/lovelace/40_camera_view.yaml

[_BaQs (Pierre)]

Same issue here, on both mobile and desktop.
Probably a conflict with another custom card: when I first load a view with NO custom card, it loads, and I can load other views. When loading first a view WITH custom cards, it fails, empty view.

[akkaria (Adam)]

This would be great.

Keep up the good work

[PlayedIn]

I updated Compact Custom Header to the latest code, and my custom cards such as card-modder with calendar-card stopped loading intermittently unless I refreshed or hit the menu button. Tried using card-loader to help, but no luck. I reverted Compact Custom Header back to code from Jan 23, and all is well again. I’m on HA 86.4. Just an fyi in case that helps…

[mayker (maykar (pronounced "maker" with a southern accent))]

Do you mean you installed the dev branch? If so, yeah it’s in development, not an update. Not ready for use.

[_BaQs (Pierre)]

Thanks for the tip!

Unfortunately I did:

git checkout tags/0.2.9

(the code from jan 23rd was tagged 0.2.9)

But still empty view.
I use those specific custom cards, and vertical/horizontal stacks:

• url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
  type: module
• url: /local/custom-lovelace/monster-card/monster-card.js?v=0
  type: js
• url: /local/custom-lovelace/button-card.js
  type: module
• url: /local/custom-lovelace/group-card/group-card.js
  type: js
• url: /local/custom-lovelace/home-setter/home-setter.js
  type: js
• url: /local/custom-lovelace/slider-entity-row.js
  type: js
• url: /local/custom-lovelace/kiosk.js
  type: js
• url: /local/custom-lovelace/useful-markdown-card.js
  type: js
• url: /local/custom_ui/weather-card.js
  type: js
• url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2
  type: js

[_BaQs (Pierre)]

OK I think I found something interesting.

I heavily use stacks within stacks, with panel:true inside views.
By inserting the custom card inside the first vertical stack, everything works well !

[mayker (maykar (pronounced "maker" with a southern accent))]

Sorry misunderstood what you were saying. In any rate, the card is being completely rewritten as we speak so any current issues may or may not exist in the rewrite and it makes sense to wait till then to investigate.

@_BaQs That makes sense, glad you found the issue, this is one that I’m confident does not exist in the rewrite.

[biau]

Hi, thank you very much for your work here.
I have a really simple config:

  - clock: 'notification,no default'
    type: 'custom:compact-custom-header'
    user_agent: Android

But on my android phone I can’t see all my tabs and I need to scroll between tabs.
Android:

How can I resize the space for notifications ?