Sidebar doesn't always show & bottom cards slow to appear

[400HPMustang]

trafficstars

I have my sidebar and bottom cards set up and on most screens the sidebar shows up right away, but the bottom cards either don't show up or they're delayed. I have the following sidebar code on my dashboard and then also on the dashboard for each room. If I go to "rooms" and then click on a room button like "Kitchen" and then click "rooms" again the sidebar is completely missing. If I reload the page then the sidebar shows up again but the bottom cards are missing.

Not sure if it's related or not but this error is also in my logs

Logger: frontend.js.latest.202206010
Source: components/system_log/__init__.py:190
First occurred: 10:33:06 AM (12 occurrences)
Last logged: 10:54:56 AM

http://10.107.112.240:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740184:412:9139 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')
http://10.107.112.240:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740184:462:2836 Uncaught TypeError: a.setConfig is not a function

sidebar:
  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: custom:mushroom-entity-card
          entity: person.stephen
          fill_container: true
          icon_type: entity-picture
          layout: horizontal
        - type: custom:mushroom-entity-card
          entity: person.sarah
          fill_container: true
          icon_type: entity-picture
          layout: horizontal
    cardStyle: |
      :host {
        width: 100%;
        #background-color:#FFF;
      }
  breakpoints:
    mobile: 768
    tablet: 1024
  date: true
  digitalClock: true
  sidebarMenu:
    - action: navigate
      active: true
      name: Home
      navigation_path: /lovelace-test/main
    - action: navigate
      name: Rooms
      navigation_path: /lovelace-test/rooms
    - action: navigate
      name: Security
      navigation_path: /lovelace-test/security
    - action: navigate
      name: Media
      navigation_path: /lovelace-test/media
  style: |
    :host {
        --sidebar-background: #2b374e;
        --sidebar-text-color: #FFF;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #2b374e;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;  
        text-align: center;
    }        

    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px;
        font-size:60px!important;
        line-height: 60px;        
    }   
    .date {
        text-align: center;
        padding-bottom: 1px;
        font-size:30px!important;
        line-height: 60px;        
    }     
  twelveHourVersion: true
  width:
    desktop: 20
    mobile: 0
    tablet: 20

Sidebar correct:

Missing sidebar:

Sidebar but missing bottom cards:

[kongjudas]

I've had this issue all the time I've used the card, in different dashboards. I have to load a mobile dashboard and then the actual dashboard. It's not really practical in kiosk mode.

[wardy277]

I have also had this issue for a while. The browser terminal show the same error: IT seems to be a caching issue as the error is only on first load, any subsequent normal refreshes and the error doesnt show

Uncaught TypeError: a.setConfig is not a function
    at sidebar-card.js?hacstag=2418255740184:462:2836

This points to the peice of js:

if (xe("firstUpdated", "Bottom card: ", e = Object.assign({}, e, this.bottomCard.cardOptions)),
            e && "object" == typeof e && e.type) {
                let t = e.type;
                t = t.startsWith(this.CUSTOM_TYPE_PREFIX) ? t.substr(this.CUSTOM_TYPE_PREFIX.length) : `hui-${t}-card`;
                const a = document.createElement(t);
                if (a.setConfig(e), #<----- ERROR IS ON THIS LINE
                a.hass = Q(),
                this.shadowRoot.querySelector(".bottom").appendChild(a),
                X(a),
                this.bottomCard.cardStyle && "" != this.bottomCard.cardStyle) {
                    let e = this.bottomCard.cardStyle
                      , t = 0
                      , s = setInterval((function() {
                        if (a && a.shadowRoot) {
                            window.clearInterval(s);
                            var n = document.createElement("style");
                            n.innerHTML = e,
                            a.shadowRoot.appendChild(n)
                        } else
                            10 == ++t && window.clearInterval(s)
                    }
                    ), 100)
                }
            } else
                je("firstUpdated", "Bottom card config error!")

[spicerackk]

I'm having a similar issue where if I navigate into a dashboard that doesn't have the sidebar active then go back a page (these dashboards are all subviews), the sidebar is gone.

[magtimmermans]

I have the same issue that the bottomCard is not shown. The rest goes okay.

[bram2202]

Same here,

I'm using Fully kiosk browser running on a tablet to display a separate dashboard i made for a tablet, Including two buttons at the bottom of the sidebar. I'm using Fully kiosk to take advantage of the option to turn on the tablet on camera motion and remote control of the disaply.

A few HA versions ago (2023.3 i think) i sometime had the issue that the button would not appear, and on next reload the where back. And when the appear, there usually was a delay. But on the latest 2 version, 2023.4 & 2024.5, the button don't show them self how many times i reload or clear the cache.

The strangest thing is, when open the dashboard on my pc's webbrowser, the buttons are there, even if i play with the size of the window.

This is a screenshot of my webbrowser:

And this is a screenshot of my tablet:

Part of te config

views:
  < large - not important>
sidebar:
  template: |
    <li>    
    </li>
  style: |
    .container.rows {
      padding: 48px 48px!important;
    }
  width:
    mobile: 0
    tablet: 20
    desktop: 20
  digitalClock: true
  date: true
  hideTopMenu: true
  hideHassSidebar: true
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace-tablet/home
      name: Home
      active: true
      icon: mdi:home
  bottomCard:
    type: horizontal-stack
    cardStyle: |
      :host {
        width: 100%;
      }
    cardOptions:
      cards:
        - type: custom:button-card
          color: auto
          color_type: card
          icon: mdi:home
          show_name: false
          size: 70px
          styles:
            card:
              - background-color: '#EBEBEB'
              - color: '#000'
              - border-radius: 20px
          tap_action:
            action: call-service
            service: automation.trigger
            service_data:
              entity_id: automation.home_scene
          action: call-service
          service: automation.trigger
          service_data:
            entity_id: automation.home_scene
        - type: custom:button-card
          color: auto
          color_type: card
          icon: mdi:bed
          show_name: false
          size: 70px
          styles:
            card:
              - background-color: '#EBEBEB'
              - color: '#000'
              - border-radius: 20px
          tap_action:
            action: call-service
            service: automation.trigger
            service_data:
              entity_id: automation.go_to_bed_scene

[vednolacni]

did anybody find solution for bottoncrd not showing up?

[DBuit]

The problem with the bottemCard is that somehow sometimes the card you wanna load is not yet available or not known as customElement so it cannot set the config it is trying to. I tried alot also some preload plugin for card but it does not make it work. Still searching but now alot of ideas.