After your suggestion I wanted to play around a bit and was searching around as I couldn’t get it to fill to the full view height. Then I came across this post (looks like they’ve been down this road).
If I figure something out I’ll let you know @raul
@mayker thank you. That post is actually me as well. I’m going to continue playing with it myself, but I think it’s a limitation of the iframe card itself and how it sets the top padding.
Ah that makes sense. Didn’t realize there was currently a CSS config option you had to keep support for.
I’ve been using the beta and it’s been working great for me! Can’t wait for the release.
That is what I tried already:post.
I cannot get the card to span the full height of the window reliably when it is resized. Looking at the card I do not think it will be possible without using card-mod or rewriting the card itself. iframe-card
Before I got too deep I checked here, since it doesn’t seem all that crazy for someone to want to link a sidebar item in the header and thought it might have been attempted already…
Install lovelace-card-mod and give this a try:
cards:
- type: iframe
style: |
#root {
height: calc(100vh - 48.5px);
padding-top: 0 !important;
}
url: https://REDACTED/
48.5px is the height of the header after being compacted by CCH. You might need to play with padding.
I’m hiding all but one view (irrigation, view #6) for my gardener’s log in.
When I log in with that account I see view #0 in the main panel even though only one view icon (irrigation, #6) is available on the header.
I’ve tried setting view #6 as the default for this account but there was no change to this behaviour.
Have you tried the latest beta? It includes a fix for default tab, full release coming this/next week with a few new features added. One of those new features will enhance default tab as well.
Ooh I am going to try this very soon. It will make me very happy I am sure.
A big 
as this will make my setup a lot more stable/usable.
Thank you
I really thought I was keeping up with all of the recent changes but alas, my header no longer shrinks down to a single row of icons. I’ve stared at this config for a while now and I just can’t seem to figure out what I’m missing. Could someone take a peek at my config and let me know what, if anything, in my configuration would cause the full header to appear? I’m running HA 0.98.2 with CCH 1.3.1 (because Custom Updater wont grab CCH 1.3.6?).
cch:
#main_config: true
header: false
compact_header: true
options: show
chevrons: true
menu: show
active_tab_color: rgb(181, 142, 49)
tab_indicator_color: rgb(181, 142, 49)
exceptions:
- conditions:
user_agent: Macintosh
config:
#hide_tabs: 9 to 17
voice: false
- conditions:
user: kiosk
config:
show_tabs: 24
notifications: hide
voice: false
menu: show
options: show
swipe: true
swipe_wrap: true
swipe_animate: swipe
swipe_prevent_default: true
swipe_amount: 20
default_tab: 24
kiosk_mode: true
- conditions:
user_agent: iPad
config:
show_tabs: 0 to 7, 21 to 26
notifications: hide
voice: false
menu: show
options: show
swipe: true
swipe_wrap: true
swipe_animate: swipe
swipe_prevent_default: true
swipe_amount: 20
- conditions:
user_agent: iPhone
config:
show_tabs: 8 to 17, 21, 22, 23
notifications: hide
voice: false
menu: hide
options: hide
swipe: true
swipe_wrap: true
swipe_animate: swipe
swipe_prevent_default: true
swipe_amount: 20
Few things:
voice: false is not a valid config option, should be voice: hide
I’ve modified your config below to fix issues mentioned above, remove options that were the default settings, and I moved the swipe options to the main config so that you don’t need to repeat the same options for every exception. When something isn’t set in an exception then the main config option is used.
Install the latest version of CCH and if you’re still having issues please fill out an issue template on github.
cch:
chevrons: true
active_tab_color: rgb(181, 142, 49)
tab_indicator_color: rgb(181, 142, 49)
voice: hide
swipe: true
swipe_animate: swipe
swipe_prevent_default: true
swipe_amount: 20
exceptions:
- conditions:
user_agent: Macintosh
config:
#hide_tabs: 9 to 17
- conditions:
user: kiosk
config:
show_tabs: 24
default_tab: 24
kiosk_mode: true
- conditions:
user_agent: iPad
config:
show_tabs: 0 to 7, 21 to 26
- conditions:
user_agent: iPhone
config:
show_tabs: 8 to 17, 21, 22, 23
menu: hide
options: hide
I forgot tot mention the beta version is working perfectly for the default view setting. Thanks.
I must say WOW to this card. Really amazing and useful, thanks alot for working on this.
I have a small suggestion. Wouldn’t it be nice to display the time and date in the center of the header? Also, i think it’s kinda weird that the date is displayed under the clock because it makes the text too small to comfortably read. The time and date should be next to eachother so they both can be big and easily visble, in my opinion.
It all comes down to spacing, if the time and date were next to each other then there would be little space for the view icons/buttons, especially on mobile devices and if they were in the center they would overlap those same icons or break the views in half which would be a nightmare to deal with.
There are new features coming to change the size of date & time independently and I’m thinking of making it so that a button could be time or date, not just time or both.
CCH doesn’t create a new header, it modifies the existing one. So I also have to work within the constraints of the default header and its elements.
I don’t think people would use center date/time on the header on their mobiles because it’s already super easy to view the time/date on them (time is easily read in the corner and date is usually a quick swipe down on the status bar). Also it is already tight with the different tabs so it’s not worth to sacrifice header space for that.
I think a center time/date on the header would be most useful on dashboards. Many use old tablets for their dashboards and their clock/date are not optimized for being used as dashboards (the clock text in the status bar is as big as on the mobile phone). Adding a time/date card is of course an option but it takes valuable space from other cards in your “dashboard” tab.
Say you have many views, where even when your on a desktop the icons extend past the middle of the screen or even so many that you have to scroll through them (like my setup). Would I split the view icons in the center and make room for the clock? Does it then become 2 sets of icons that can each scroll or just the second one? Say you have only 3 view icons, wouldn’t that look very lopsided having icons almost fill the space between the clock and the left side, but nothing between the clock and the right side? Do I then try to make them as even as possible on both sides? Does having one icon on each side look right?
I just don’t see a feasible way to do this without introducing so many issues that it would require me to essentially hide the default header and build a completely new one.
Maybe I’m just not understanding what you want it to look like?
Hi,
I am loving the compact custom header, but I have run into some trouble and can’t seem to figure out what is wrong.
I am running Hassio on a pi 3b+, and accessing home assistant in Chrome. I have cleared all chrome history and cache, as well as constantly refreshing in my debug efforts. Now to the problem:
When I try to hide tabs based on a boolean, I can only seem to have it reliably work with one tab hiding, and one boolean. When I use 2 or more booleans (one per tab I want to hide), the hide tab no longer works reliably works after the page is refreshed.
Code:
cch:
background: black
chevrons: true
conditional_styles:
- entity: input_boolean.show_shopping_list
condition:
state: 'off'
tab:
'7':
hide: true
- entity: input_boolean.show_floorplan
condition:
state: 'off'
tab:
'8':
hide: true
Picture 1: Initial state, both booleans off, both tabs show. Working:
Picture 2: Turn off floorplan, tab is hidden, working
Picture 3: Now, when the webpage is refreshed, or say I close out and reopen, it all breaks, Both are now hidden for some reason.
My original goal was to have 4 total booleans, one per tab, to hide or show 4 tabs. However, I cant seem to use conditional styling to control more than 1 tab reliably, and have it persist if chrome refreshes. (NOTE: I also tried changing from hide tabs, to change the tab color and I see the same issue. So I am pretty sure it is an issue with my conditional, and not just hiding)
Any help is greatly appreciated. Thanks in advance! (Edit: formatted code correctly)
I’ve replicated your config and can confirm that it works as intended for me. Could you fill out an issue on Github, complete the issue template as much as you can, and I’ll investigate more this weekend.
I trying to use this on a old iPhone but it seems not to work, would it be down to the iPhone’s user agent being:
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1
CCH works with other devices on my system - is there anyway around this if the phone is too old. I only want to use the iPhone on a wall mount display now.
P.S. its been update to the latest iOS for the device.
Home assistants works ok on the iPhone but just can’t custom it using CCH
