content of page overflows bottom browser window

[Mariusthvdb]

please see:

not using any setting for footer in the config:

hide_config: true
compact_mode: true
button_text:
  options: >-
    {{ hours24 }}:{{ minutesLZ }} - {{state_attr('weather.home_darksky','temperature') }}°

show_tabs: >
  {% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
  {% else %} 0 to 28
  {% endif %}

Hassio Rpi4, 103.0 CH version 1.0.4

[github-actions[bot]]

Please, be sure to read the issues section of the docs and provide the required information. Issues that don't provide the necessary information may not get a reply and may be closed.

[maykar]

No errors?

[Mariusthvdb]

no really sorry, checked home-assistant.log and inspector

dont have a debug setting on the custom-header though, should I set it to something?

[maykar]

nope, probably just no error. Will investigate, but havent been able to recreate it yet.

[Mariusthvdb]

I now see it on IOS also, will upload from the device:

o wow, this is huge.... sorry, just a screen dump from the iphone..

update

the above is on an iphone 11 pro. just tested on an iPhone 6s, and that shows alright..odd.

[maykar]

Can you share your resources section, want to see what all custom add-ons you've got and if custom header doesn't play nice with one.

[Mariusthvdb]

sure:

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/dnguyen800/air-visual-card
- url: /local/lovelace/resources/air-visual-card.js?v=0.9.7
  type: js

# https://github.com/thomasloven/lovelace-auto-entities
- url: /local/lovelace/resources/auto-entities.js?v=1.9
  type: module

# https://github.com/custom-cards/bar-card
- url: /local/lovelace/resources/bar-card.js?v=1.6.2
  type: js

# https://github.com/custom-cards/bignumber-card
- url: /local/lovelace/resources/bignumber-card.js?v=0.0.2
  type: js

# https://github.com/custom-cards/button-card
- url: /local/lovelace/resources/button-card.js?v=3.0.0
  type: module

# https://github.com/thomasloven/lovelace-card-mod
- url: /local/lovelace/resources/card-mod.js?v=11
  type: module

# https://github.com/custom-cards/decluttering-card
- url: /local/lovelace/resources/decluttering-card.js?v=0.2.0
  type: module

# https://github.com/thomasloven/lovelace-card-tools
- url: /local/lovelace/resources/card-tools.js?v=2.3
  type: js

#https://github.com/maykar/compact-custom-header/wiki/Installation
#- url: /local/lovelace/resources/compact-custom-header/compact-custom-header.js?v=1.4.8
#  type: module

# https://maykar.github.io/custom-header/#intro/intro
- url: /local/lovelace/resources/custom-header.js?v=1.0.5
  type: module

# NOT USED https://github.com/custom-cards/config-template-card
- url: /local/lovelace/resources/config-template-card.js?v=1.1.1
  type: module

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
- url: /local/lovelace/resources/dark-sky-weather-card.js?v=7.1.6
  type: module

# https://github.com/custom-cards/entity-attributes-card
- url: /local/lovelace/resources/entity-attributes-card.js?v=0.1.2
  type: js

# https://github.com/thomasloven/lovelace-fold-entity-row
- url: /local/lovelace/resources/fold-entity-row.js?v=a00f7c9
  type: js

# Ha Cards : https://www.home-assistant.io/lovelace/gauge
# https://github.com/custom-cards/gauge-card
- url: /local/lovelace/resources/gauge-card.js?v=0.2.2
  type: js

# https://github.com/custom-cards/group-card
- url: /local/lovelace/resources/group-card.js?v=0.0.3
  type: js

# https://github.com/custom-cards/list-card
- url: /local/lovelace/resources/list-card.js?v=0.1.1
  type: js

#- url: /local/lovelace/resources/useful-markdown-card.js?v=dfc268
#  type: js

# DEPRECATED https://github.com/thomasloven/lovelace-markdown-mod
#- url: /local/lovelace/resources/markdown-mod.js?v=1.1
#  type: module

# https://github.com/kalkih/mini-graph-card
- url: /local/lovelace/resources/mini-graph-card-bundle.js?v=0.9.0
  type: module

# https://github.com/kalkih/mini-media-player
- url: /local/lovelace/resources/mini-media-player-bundle.js?v=1.5.1
  type: js

# https://github.com/custom-cards/monster-card
- url: /local/lovelace/resources/monster-card.js?v=0.2.5
  type: js

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/gurbyz/power-wheel-card
- url: /local/lovelace/resources/power-wheel-card.js?v=0.0.9
  type: module

# https://github.com/custom-cards/secondaryinfo-entity-row
- url: /local/lovelace/resources/secondaryinfo-entity-row.js?v=0.3.1
  type: module

# https://github.com/kalkih/simple-weather-card
- url: /local/lovelace/resources/simple-weather-card-bundle.js?v=0.5.0
  type: module

# https://github.com/thomasloven/lovelace-slider-entity-row
- url: /local/lovelace/resources/slider-entity-row.js?v=f9064d6
  type: module

# https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
#- url: /local/lovelace/resources/tiles-card.js?v=0.2
#  type: js

# https://github.com/custom-cards/vertical-stack-in-card
- url: /local/lovelace/resources/vertical-stack-in-card.js?v=0.2.1
  type: js

# https://github.com/royto/waze-card
- url: /local/lovelace/resources/waze-card.js?v=1.3.0
  type: js

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/sgttrs/lovelace-weather-card-chart
- url: /local/lovelace/resources/weather-card-chart.js?v=0.3.1
  type: module

edit updated a few custom-cards to their latest incarnations, but no change unfortunately.

[dy1io]

I can confirm I have the same issue:

Here's a copy of my resources as well if it is helpful:

resources:
  - url: /community_plugin/custom-header/custom-header.js
    type: module
  - type: module
    url: /customcards/github/custom-cards/tracker-card.js?track=true
  - type: module
    url: /community_plugin/swipe-card/swipe-card.js
  - type: js
    url: /community_plugin/fan-control-entity-row/fan-control-entity-row.js
  - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module
  - url: /community_plugin/lovelace-card-mod/card-mod.js?
    type: module
  - url: /community_plugin/weather-card/weather-card.js
    type: module
  - url: /community_plugin/lovelace-auto-entities/auto-entities.js
    type: module
  - url: /community_plugin/lovelace-card-tools/card-tools.js
    type: module
  - url: /community_plugin/button-toolbar/button-toolbar.js
    type: module

[maykar]

@ThePicklenat0r what does your config look like for custom header?

[Mariusthvdb]

updated the list of custom-cards used, deleted a few in the resource list, no change.

do note that you need a theme with a dark background to notice the effect. Change to a light one few moments ago and thought version 1.06 had solved it. Then my night theme kicked in, and the overflow was visible again...

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/dnguyen800/air-visual-card
- url: /local/lovelace/resources/air-visual-card.js?v=0.9.7
  type: js

# https://github.com/thomasloven/lovelace-auto-entities
- url: /local/lovelace/resources/auto-entities.js?v=1.9
  type: module

# https://github.com/custom-cards/bar-card
- url: /local/lovelace/resources/bar-card.js?v=1.6.2
  type: js

# https://github.com/custom-cards/bignumber-card
- url: /local/lovelace/resources/bignumber-card.js?v=0.0.2
  type: js

# https://github.com/custom-cards/button-card
- url: /local/lovelace/resources/button-card.js?v=3.0.0
  type: module

# https://github.com/thomasloven/lovelace-card-mod
- url: /local/lovelace/resources/card-mod.js?v=11
  type: module

# https://github.com/thomasloven/lovelace-card-tools
- url: /local/lovelace/resources/card-tools.js?v=2.3
  type: js

# NOT USED https://github.com/custom-cards/config-template-card
#- url: /local/lovelace/resources/config-template-card.js?v=1.1.1
#  type: module

# https://maykar.github.io/custom-header/#intro/intro
- url: /local/lovelace/resources/custom-header.js?v=1.0.6
  type: module

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
- url: /local/lovelace/resources/dark-sky-weather-card.js?v=7.1.6
  type: module

# https://github.com/custom-cards/decluttering-card
- url: /local/lovelace/resources/decluttering-card.js?v=0.2.0
  type: module

# https://github.com/custom-cards/entity-attributes-card
- url: /local/lovelace/resources/entity-attributes-card.js?v=0.1.2
  type: js

# https://github.com/thomasloven/lovelace-fold-entity-row
- url: /local/lovelace/resources/fold-entity-row.js?v=a00f7c9
  type: js

# Ha Cards : https://www.home-assistant.io/lovelace/gauge
# https://github.com/custom-cards/gauge-card
- url: /local/lovelace/resources/gauge-card.js?v=0.2.2
  type: js

# https://github.com/custom-cards/group-card
- url: /local/lovelace/resources/group-card.js?v=0.0.3
  type: js

# NOT USED https://github.com/thomasloven/lovelace-layout-card
#- url: /local/lovelace/resources/layout-card.js?v=2.3
#  type: module

# https://github.com/custom-cards/list-card
- url: /local/lovelace/resources/list-card.js?v=0.1.1
  type: js

# NOT USED  https://github.com/gadgetchnnel/lovelace-card-templater
#- url: local/path/to/file/lovelace-card-templater.js?v=0.0.6
#  type: js

# https://github.com/kalkih/mini-graph-card
- url: /local/lovelace/resources/mini-graph-card-bundle.js?v=0.9.0
  type: module

# https://github.com/kalkih/mini-media-player
- url: /local/lovelace/resources/mini-media-player-bundle.js?v=1.5.1
  type: js

# https://github.com/custom-cards/monster-card
- url: /local/lovelace/resources/monster-card.js?v=0.2.5
  type: js

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/gurbyz/power-wheel-card
- url: /local/lovelace/resources/power-wheel-card.js?v=0.0.9
  type: module

# https://github.com/custom-cards/secondaryinfo-entity-row
- url: /local/lovelace/resources/secondaryinfo-entity-row.js?v=0.3.1
  type: module

# https://github.com/kalkih/simple-weather-card
- url: /local/lovelace/resources/simple-weather-card-bundle.js?v=0.5.0
  type: module

# https://github.com/thomasloven/lovelace-slider-entity-row
- url: /local/lovelace/resources/slider-entity-row.js?v=f9064d6
  type: module

# NOT USED https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
#- url: /local/lovelace/resources/tiles-card.js?v=0.2
#  type: js

# https://github.com/custom-cards/vertical-stack-in-card
- url: /local/lovelace/resources/vertical-stack-in-card.js?v=0.2.1
  type: js

# https://github.com/royto/waze-card
- url: /local/lovelace/resources/waze-card.js?v=1.3.0
  type: js

# TAKE CARE!! MANUAL CHANGES IN SOURCECODE
# https://github.com/sgttrs/lovelace-weather-card-chart
- url: /local/lovelace/resources/weather-card-chart.js?v=0.3.1
  type: module

[dy1io]

@maykar custom header config:

custom_header:
  hide_tabs: '5'
  hide_unused: true
  hide_config: true
  hide_help: true
  header_text: 'Home'

[maykar]

So the only custom resource you both have that I would think might cause the conflict is card-mod. Would you both try temporarily removing card-mod from your resources and seeing if the issue persists?

[Mariusthvdb]

will do! just to be sure, I tested it without CH, (could have been there before unnoticed, caused by HA 103.0) after all. Is not the case though. Without CH all is playing nicely:

re-entering CH immediately shows:

now I'll take out Card-mod:

it's like that on all pages, the bottom card is floating out of the browser window..

just tried footer_mode, and that behaves nicely:

[Mariusthvdb]

as is mentioned by @aFFekopp on the community: having a background makes difference:

Trying a bare theme setting (default) it is clear CH causes a few pixels height of the background to disappear

and makes the card on the right side appear to overflow it. While in fact is is the (un-styled) background being cut-off.

[maykar]

I believe I've found the issue, but can you confirm that this only happens in compact_mode?

[dy1io]

@maykar I found similar results to @Mariusthvdb when disabling card-mod. I tried specifying compact_mode: false and it doesn't seem to make a difference.

[Mariusthvdb]

unfortunately no, taking out compact_mode, and having the config default to false doesn't solve the issue either.

what's more, it brought to light another issue the header:

where the icons don't continue under the right time button text-template...

[maykar]

This is actually a feature. Couple of places I've explained it in more detail:

https://github.com/maykar/custom-header/issues/41 https://community.home-assistant.io/t/custom-header/155399/30

[Mariusthvdb]

oops, my pardon ;-)

it's just that it looks somewhat differently here:

[maykar]

If you hide tab chevrons you'll see one more icon in there. There's probably something I could do with the smoothness of the animation as well, but I imagine it's rare that anyone scrolls that slowly :)

[Mariusthvdb]

If you hide tab chevrons you'll see one more icon in there. There's probably something I could do with the smoothness of the animation as well, but I imagine it's rare that anyone scrolls that slowly :)

haha, maybe, was trying to keep up with your speed ;-)) but, in all honesty, compact mode feels much tidier and, as I mentioned earlier, more 'native'. The header and the rest of the screen are much tighter.

[maykar]

Is this (the original issue) still an issue on the latest release?

[Mariusthvdb]

no! as confirmed on the community https://community.home-assistant.io/t/custom-header/155399/148?u=mariusthvdb thanks for the quick fix!

[maykar]

Saw the bit about the tab indicator, but totally missed that this was fixed. Thanks!

[dy1io]

Fixed here also!