Not working in 2023.4

[horve000]

Stopt working after updating to homeassistant 2023.4

[blaiser72]

Stop working after update home assistant version 2023.4

[igmsoft]

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!

[DBuit]

Im updating at this moment en will see how to fix it and update the card if needed

[DBuit]

I just updated the card, it looks all good for me. let me know if you still got issues!

[DBuit]

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.

[sanderabbink]

Haha, just updated, and found the same issue. Also it is not possible to drag the original sidebar from the left top corner.

[sekonicpr]

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.

[horve000]

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.

[Andreasjkoch]

I just updated, everything works again for me

[igmsoft]

Everything works again for me, thank you DBuit

[horve000]

Update to 0.1.9.1 Fixed the multiple sidebars for me. Thank you @DBuit .

[AlxSZP]

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

[rodrigogbs]

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

[Begie1605]

After update....everything works again as expected....thnx @DBuit

[olaoups]

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...

• The "margin-top:0!important;" on the #view element is overwriting the default CSS property of HA.
• It works great with the kiosk-mode enable but not on standard views (without kiosk-mode).

Here is an example of broken margin-top on my screen:

I hope it can help! Thanks for your job!

[horve000]

Same problem here.

[gffa325]

Same problem here.

Same problem here.

[almighty059]

I have the same problem with the top missing.

[leonidfeldman1977]

Same for me

[sekonicpr]

Same here!

[sparment]

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')

[michaelkaravani]

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')

[DBuit]

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.

[DBuit]

Just released update

[horve000]

Just released update

All works like before again. Thank you !!

[rodrigogbs]

Still not working here. ![Uploading IMG_8537.jpeg…]()

[sekonicpr]

After performing the update it leaves me a small bar in the sidebar.

[Murcin86]

Confirm - 1.9.2 fix that gap :)

[blaiser72]

Confirm bug fixes on 1.9.2.

[theglus]

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

[sparment]

I'm still having the gap issue with 1.9.2:

[sparment]

Clearing my cache seemed to fix the issue.

[BadgerLoaf]

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?

[sekonicpr]

Same for me on bottom card even after a clear cache.

[sparment]

Same

[DBuit]

@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?

[sekonicpr]

[BadgerLoaf]

@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.

[sekonicpr]

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;
        }

[SeanPM5]

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.

[BadgerLoaf]

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 🤞

[rodrigogbs]

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:

[almighty059]

@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.

[olaoups]

Same issue... But it seems that this problem is relative to kiosk-mode and not to sidebar-card.

When kiosk-mode is enabled:

• The var(--header-height) has a value in px when calculating the <div id="customSidebar">
• But it has a 0px value when calculating the <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!

[sparment]

@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]

@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..

[sparment]

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.

[michaelkaravani]

@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: []

[sparment]

I got rid of type: panel and panel: 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)

[michaelkaravani]

I got rid of type: panel and panel: 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 ?