Closed horve000 closed 1 year ago
Stop working after update home assistant version 2023.4
Resources should no longer be added to the dashboard configuration but can be added in the dashboard config panel. Tried adding it under dashboards resources but no luck!
Im updating at this moment en will see how to fix it and update the card if needed
I just updated the card, it looks all good for me. let me know if you still got issues!
There is an issue with the update. if you go to other page it redraws the sidebar inside the old one so you get multiple sidebars.... Working on this issue.
Haha, just updated, and found the same issue. Also it is not possible to drag the original sidebar from the left top corner.
I just updated the card, it looks all good for me. let me know if you still got issues!
stop working on my HA 2023.3.6 after 0.1.9 update.
Just updated and have the same issue, multiple sidebars. Also the layout is not the same as before. Also if the sidebar is showing the top bar is now over the side bar and the rest of the cards. If the sidebar is not showing everything looks fine.
I just updated, everything works again for me
Update to 0.1.9.1 Fixed the multiple sidebars for me. Thank you @DBuit .
Hi @DBuit I had the sidebar working just fine, the update broke it. After to 0.1.9.1 I can see it now; however, now IO'm noticing a new issue:
The top bar is eating the top of my dashboard, any help will be appreciated
Hi @DBuit I had the sidebar working just fine, the update broke it. After to 0.1.9.1 I can see it now; however, now IO'm noticing a new issue:
The top bar is eating the top of my dashboard, any help will be appreciated
Same here
After update....everything works again as expected....thnx @DBuit
Hi @DBuit I had the sidebar working just fine, the update broke it. After to 0.1.9.1 I can see it now; however, now IO'm noticing a new issue:
The top bar is eating the top of my dashboard, any help will be appreciated
Same problem here...
Here is an example of broken margin-top on my screen:
I hope it can help! Thanks for your job!
Same problem here.
Same problem here.
Same problem here.
I have the same problem with the top missing.
Same for me
Same here!
Same here. I just installed this custom component yesterday. I noticed an error in my system log... not sure if this is related to the issue noted here or not:
http://192.168.1.33:8123/local/community/sidebar-card/sidebar-card.js:18067:88 TypeError: null is not an object (evaluating 'header.offsetHeight') http://192.168.1.33:8123/local/community/sidebar-card/sidebar-card.js:18067:89 Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')
I also have the same problem I use floorplan card And in the log this is what appears
10.4.2023, 13:34:17 ERROR ERROR Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')<br>URL: http://192.168.5.34:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740191<br>Line: 18067, column: 89<br>Error: {}
this point to this line
updateSidebarSize(root) {
const sidebarInner = this.shadowRoot.querySelector('.sidebar-inner');
const header = root.shadowRoot.querySelector('ch-header') || root.shadowRoot.querySelector('app-header');
const offParam = getParameterByName('sidebarOff');
if (sidebarInner) {
sidebarInner.style.width = this.offsetWidth + 'px';
----->>> ** let headerHeight = this.config.hideTopMenu && offParam == null ? 0 : header.offsetHeight; **
log2console('updateSidebarSize', 'headerHeight', headerHeight);
sidebarInner.style.height = `calc(${window.innerHeight}px - ${headerHeight}px)`; //100 * _1vh - headerHeight + 'px';
sidebarInner.style.top = headerHeight + 'px';
}
and in my HA log
Logger: frontend.js.latest.202304061
Source: components/system_log/__init__.py:257
First occurred: 9 באפריל 2023 בשעה 22:48:04 (18 occurrences)
Last logged: 13:26:43
http://192.168.5.34:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740184:18067:89 Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')
http://192.168.5.34:8123/frontend_latest/25408-l9JqVOI8CmQ.js:1:1482 Uncaught RangeError: Value need to be finite number for Intl.RelativeTimeFormat.prototype.format()
http://192.168.5.34:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740191:18067:89 Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')
Hello everyone,
Im working on fix for the header that is over the sidebar when you dont hide the top header of hass. Also fixing the bottomcard position when you dont hide the top header.
Think i will release today.
Just released update
Just released update
All works like before again. Thank you !!
Still not working here. ![Uploading IMG_8537.jpeg…]()
After performing the update it leaves me a small bar in the sidebar.
Confirm - 1.9.2 fix that gap :)
Confirm bug fixes on 1.9.2.
I'm still experiencing issues on 1.9.2.
background: var(--background-image)
kiosk_mode:
hide_header: true
sidebar:
hideTopMenu: true
digitalClock: true
twelveHourVersion: true
period: false
date: true
dateFormat: dddd, MMMM Do
width:
mobile: 0
tablet: 25
desktop: 25
sidebarMenu:
- action: navigate
navigation_path: "/lovelace/default_view"
name: "Home"
icon: "mdi:home"
active: true
- action: navigate
navigation_path: "/lovelace/winston"
name: "Winston"
icon: "mdi:robot-vacuum-variant"
active: true
- action: navigate
navigation_path: "/lovelace/ha"
name: "System"
icon: "mdi:home-assistant"
active: true
template: |
<li>The air quality in Dogpatch is {{states('sensor.u_s_air_pollution_level')}} with an AQI of {{states('sensor.aqi')}}.</li>
style: |
:host {
--sidebar-background: rgba(0,0,0,.3);
}
button_card_templates: !include_dir_named includes/lovelace/button_card_templates
decluttering_templates: !include_dir_named includes/lovelace/decluttering_templates
title: Loft
views: !include_dir_list includes/lovelace/views
I'm still having the gap issue with 1.9.2:
Clearing my cache seemed to fix the issue.
After performing the update it leaves me a small bar in the sidebar.
I'm having the same issue on my tablet running Fully, though not on my MacOS browser.
I'm also no longer getting my bottom cards since 2023.4.... anyone else having that issue?
Same for me on bottom card even after a clear cache.
Same
@BadgerLoaf , @sekonicpr , @sparment can one of you check the html of the page if the bottomcard is just not rendered or that it is positioned at some weird place?
Also the extra space on top, can you share your config of the sidebar?
@BadgerLoaf , @sekonicpr , @sparment can one of you check the html of the page if the bottomcard is just not rendered or that it is positioned at some weird place?
Also the extra space on top, can you share your config of the sidebar?
I suspect @sekonicpr has given you what you need, but can send some stuff over later if needed.
Here my sidebar config
sidebar:
width:
mobile: 25
tablet: 25
desktop: 20
clock: false
digitalClock: true
twelveHourVersion: true
period: true
date: true
dateFormat: DD MMMM YYYY
sidebarMenu:
- action: navigate
navigation_path: main
name: Home
active: true
icon: mdi:home
- action: navigate
navigation_path: alarm
name: Alarm
active: true
icon: mdi:shield-lock-open-outline
- action: navigate
navigation_path: tool-room
name: Tool Room
active: true
icon: mdi:home-circle-outline
- action: navigate
navigation_path: media_center
active: true
name: Media Center
icon: mdi:music
- action: navigate
navigation_path: climate
name: Climate
icon: mdi:weather-cloudy
- action: navigate
navigation_path: network
name: Network
active: true
icon: mdi:lan-connect
- action: navigate
navigation_path: system-monitor
active: true
name: System Monitor
icon: mdi:chart-line
- action: navigate
navigation_path: weather
active: true
name: Weather
icon: mdi:weather-hazy
style: |
.sidebarMenu li.active {
background-color: rgba(5, 9, 111, 0.6)!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: orange!important;
}
h1.digitalClock {
font-size: 50px !important;
font-weight: 400 !important;
cursor: default;
padding-bottom: 0px;
padding-top: 0px
font-family: 'Product Sans'
}
h2.date {
text-align: center;
font-size: 34px;
font-weight: 400 !important;
font-family: 'Product Sans'
}
h1{
text-align: center;
font-size: 25px;
}
period{
text-align: right;
font-size: 8px;
font-variant: large-caps
text-transform: capitalize
}
:host {
--sidebar-background: #160b24;
--sidebar-text-color: #BDC1C6;
--face-color: #312F2F;
--face-border-color: #615E5E;
--clock-hands-color: #0C0808; !important
--clock-seconds-hand-color: #B11F00; !important
--clock-middle-background: #474545; !important
--clock-middle-border: #615E5E; !important
}
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: weather-forecast
entity: weather.home
show_forecast: true
style: |
ha-card {
background: transparent;
border-radius: 0px;
margin: 0px !important;
padding: 0px 16px 0px !important;
box-shadow: none !important;
font-size: 5px !important;
/*filter: grayscale(100%);*/
-webkit-tap-highlight-color: transparent;
}
:host .content {
flex-flow: row-reverse !important;
}
:host .state , :host .temp {
font-size: 18px !important;
font-weight: 300 !important;
}
.temp-attribute {
text-align: left;
margin-left: -78px;
}
ha-card .icon-image svg {
height: 32px !important;
}
:host .temp-attribute span {
font-size: 11px !important;
top: 7px !important;
color: rgb(156, 156, 156);
}
cardStyle: |
:host {
width: 100%;
top: 30;
bottom: 0;
left: 0;
}
With 1.9.2 I also have the gap at top of sidebar. I've determined it's because I use kiosk-mode to hide the top header rather than sidebar-card's hideTopMenu
boolean. Several others in this thread with issue (@sekonicpr @BadgerLoaf @theglus) also appear to be using kiosk-mode (it's a very popular card). It can be reproduced with minimal config:
kiosk_mode:
admin_settings:
hide_header: true
I prefer to use kiosk-mode to hide the header because it has more features and lets you only hide it from certain users (the "tablet" user account in my case).
From what I can tell, kiosk mode is successfully hiding the top header but sidebar-card is displaying a small gap at the top now where it assumes the (hidden) header is. Hopefully this can be fixed as these two cards always worked together perfectly before this latest 1.9.2 update.
Good catch @SeanPM5. As you suggest, I do use kiosk-mode and so that sounds like thats the culprit. Which also explains why my Mac broswer isn't affected, as the user I use on there is purposefully configured in kiosk-mode to not hide the top bar.
Hopefully it might be a relatively simple fix given they use to work ok together 🤞
Guys, I don't use Kiosk Mode and the problem is happening in my installation:
Here is my sidebar config:
sidebar:
hideTopMenu: true
hideHassSidebar: false
showTopMenuOnMobile: true
digitalClock: true
date: true
dateFormat: ddd DD MMM YY
width:
desktop: 18
mobile: 0
tablet: 18
sidebarMenu:
- action: navigate
name: Home
icon: mdi:home
navigation_path: /lovelace/home
- action: navigate
name: Cozinha
icon: mdi:countertop
navigation_path: /lovelace/cozinha
- action: navigate
name: Energia
icon: mdi:lightning-bolt
navigation_path: /lovelace/energia
- action: navigate
name: Escritório
icon: mdi:chair-rolling
navigation_path: /lovelace/escritorio
- action: navigate
name: Lavanderia
icon: mdi:washing-machine
navigation_path: /lovelace/lavanderia
- action: navigate
name: Quarto
icon: mdi:baby
navigation_path: /lovelace/quarto
- action: navigate
name: Sacada
icon: mdi:balcony
navigation_path: /lovelace/sacada
- action: navigate
name: Sala
icon: mdi:sofa
navigation_path: /lovelace/sala
- action: navigate
name: Suíte
icon: mdi:seat-individual-suite
navigation_path: /lovelace/suite
template: |
<li>
Próximos Eventos:
</li>
<li>
{% if as_timestamp(state_attr('calendar.visita','start_time')) >
as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S')) and
(as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S'))+43200) >
as_timestamp(state_attr('calendar.visita','start_time')) %} {{
state_attr('calendar.visita','message') }} - {{
as_timestamp(state_attr('calendar.visita','start_time')) |
timestamp_custom('%H:%M') }} {% endif %}
</li>
<li>
{% if as_timestamp(state_attr('calendar.aula_ingles','start_time')) >
as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S')) and
(as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S'))+43200) >
as_timestamp(state_attr('calendar.aula_ingles','start_time')) %} {{
state_attr('calendar.aula_ingles','message') }} - {{
as_timestamp(state_attr('calendar.aula_ingles','start_time')) |
timestamp_custom('%H:%M') }} {% endif %}
</li>
<li>
{% if as_timestamp(state_attr('calendar.diarista','start_time')) >
as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S')) and
(as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S'))+43200) >
as_timestamp(state_attr('calendar.diarista','start_time')) %} {{
state_attr('calendar.diarista','message') }} - {{
as_timestamp(state_attr('calendar.diarista','start_time')) |
timestamp_custom('%H:%M') }} {% endif %}
</li>
<li>
{% if as_timestamp(state_attr('calendar.consulta_psicologo','start_time')) >
as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S')) and
(as_timestamp(now().strftime('%Y-%m-%d %H:%M:%S'))+43200) >
as_timestamp(state_attr('calendar.consulta_psicologo','start_time')) %} {{
state_attr('calendar.consulta_psicologo','message') }} - {{
as_timestamp(state_attr('calendar.consulta_psicologo','start_time')) |
timestamp_custom('%H:%M') }} {% endif %}
</li>
style: |
:host {
--sidebar-background: var(--primary-background-color);
--sidebar-text-color: var(--primary-text-color);
--border-radius: 5px;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-image: url('/local/sidebar_background.png');
border-radius: 40px;
font-weight: bold;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px;
}
.digitalClock {
color: rgba(255, 255, 255, 0.7);
font-size: 50px ;
font-weight: 500;
letter-spacing: -0.05vw;
text-align: center;
}
.date {
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 25px;
font-weight: 300;
text-align: center;
letter-spacing: -0.05vw;
}
.template li {
color: rgba(255, 255, 255, 0.7);
font-size:.1.3vw;
font-weight: 200;
opacity: 0.3;
letter-spacing: -0.05vw;
text-align: center;
}
background: var(--background-image)
title: T10A263
views:
@BadgerLoaf I'm having the same issue and I do not see any options in the sidebar card that will allow me select devices/users for the top menu showing like the kiosk card has.
Same issue... But it seems that this problem is relative to kiosk-mode and not to sidebar-card.
When kiosk-mode is enabled:
var(--header-height)
has a value in px when calculating the <div id="customSidebar">
<div id="view">
Second constatation: There is an error in console log for the kiosk-mode:
kiosk-mode.js?hacstag=497319128183:1 Uncaught TypeError: Cannot read properties of null (reading 'dataset')
Any idea? Thanks for your help!
@michaelkaravani I'm still having the same issue that you referenced above. Are you? Or did the update fix it for you? I'm wondering if we should be opening a separate issue.
@michaelkaravani I'm still having the same issue that you referenced above. Are you? Or did the update fix it for you? I'm wondering if we should be opening a separate issue.
the error in the log Update did the job it doesn't appear anymore.
I only had a problem with the floorplan card
To fix this, I canceled full_height: fasle
in the floorplan card
And I used a layout card
title: floorplan
path: floorplan
type: custom:masonry-layout
layout:
width: 730
max_cols: 1
badges: []
I don't use the top bar hideTopMenu: true
in sidebar card
I hope I was able to help in some way..
Thanks. This was helpful. I figured out the issue looks to be a setting I have in my views "panel: true"
If I remove this setting the sidebar works consistently as it should. Same issue that was reported here in 2020 that was later resolved with a Sidebar update:
https://community.home-assistant.io/t/lovelace-custom-sidebar-card/174348/201
@DBuit any chance you recall how you resolved this problem in the past? If I should open a separate issue please let me know.
@sparment
You're right.
This is why I used a layout card
solve it for now
I remove this code line panel: true
and type: panel
from my view
And I set the width of the card to width: 730
in the layout card
To fit my screen and I set max_cols: 1
title: floorplan
path: floorplan
type: custom:masonry-layout
layout:
width: 730 // you need to change this
max_cols: 1
badges: []
I got rid of type: panel
and panel: true
but am still having the same issues.
Errors in my log:
I got rid of
type: panel
andpanel: true
but am still having the same issues.Errors in my log:
- http://192.168.1.33:8123/local/community/sidebar-card/sidebar-card.js:18125:33 Uncaught TypeError: cardElement.setConfig is not a function
- http://192.168.1.33:8123/local/community/sidebar-card/sidebar-card.js:18125:42 TypeError: cardElement.setConfig is not a function. (In 'cardElement.setConfig(card)', 'cardElement.setConfig' is undefined)
I went through my log
I don't have any such error
you can share your raw Configuration
code ?
Stopt working after updating to homeassistant 2023.4