Bottom card not showing

[Andreasjkoch]

Hi, I have an issue where the bottom card doesn't show most of the time. I think it is about 1/10 times that the bottom card actually shows up. There is plenty of space for the card to show up as questioned in #10. Are anyone else having this problem, or am I the only one? I do have a log error, but I am not sure if it is related or not:

Logger: frontend.js.latest.202305033
Source: components/system_log/__init__.py:257
First occurred: 23.08.18 (3 occurrences)
Last logged: 23.08.18

https://ha.[REDACTED].dk/tablet-dashboard/overview:0:0 Uncaught
https://ha.[REDACTED].dk/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740194:18109:33 Uncaught TypeError: cardElement.setConfig is not a function

The bottom card that I am using, is the default one from the readme. Here is the full sidebar that I am using:

digitalClock: true
date: true
dateFormat: "dddd, LL"
width: 23.5
hideTopMenu: true
hideHassSidebar: true
bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: "custom:button-card"
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:home
        - type: "custom:button-card"
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:lightbulb
    cardStyle: |
      :host {
        width: 100%;
        background-color:#FFF;
      }
debug: true
showTopMenuOnMobile: true
template: |
  <li>
    {% if now().hour  < 5 %} Godnat {{'\U0001F634'}}
    {% elif now().hour < 12 %} Godmorgen {{'\u2615\uFE0F'}}
    {% elif now().hour < 18 %} Godeftermiddag {{'\U0001F44B\U0001F3FB'}}
    {% else %} Godaften {{'\U0001F44B\U0001F3FB'}}{% endif %}
  </li>
  {% if is_state('binary_sensor.garden_gate_north', 'on') %} <li>Havelåge Nord er åben!</li> {% endif %}
  {% if is_state('binary_sensor.garden_gate_south', 'on') %} <li>Havelåge Syd er åben!</li> {% endif %}

  {% if states('sensor.antal_lys_taendt') | float > 0 %} <li>{{states('sensor.antal_lys_taendt')}} lys tændt</li> {% endif %}
style: |
  :host {
    --sidebar-background: #1E2022;
    --sidebar-text-color: #BCBDBD;
    --font-family: "Roboto", sans-serif;
    --sidebar-selected-text-color: #FFF;
    --sidebar-selected-icon-color: #FFF;
  }
  .sidebar-inner {
    margin-top: 2em !important;
  }
  .type-picture-elements {
    background-color: #121212 !important;
  }
  .digitalClock {
    font-weight: 200;
    font-size: 5.5em !important;
    margin-left: 10% !important;
  }
  .date {
    font-size: 1.3em !important;
    margin-left: 10% !important;
    margin-top: -0.8em !important;
    font-weight: 300;
    color: #606263 !important;
  }
  .type-picture-elements {
    border-radius: 0 !important;

  }
  body {
    --ha-card-border-radius: 0 !important;
  }
  .sidebarMenu li {
    height: 1.5em;
    border-radius: 100px !important;
    font-size: 2em !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }
sidebarMenu:
- action: navigate
  navigation_path: "/tablet-dashboard/overview"
  name: "Oversigt"
  active: true
  icon: mdi:home
- action: navigate
  navigation_path: "/tablet-dashboard/enheder"
  name: "Enheder"
  icon: mdi:devices
- action: navigate
  navigation_path: "/tablet-dashboard/energy"
  name: "Energi"
  icon: mdi:lightning-bolt
- action: navigate
  navigation_path: "/tablet-dashboard/energyprices"
  name: "Elpriser"
  icon: mdi:lightning-bolt

[rene-bayer]

+1

[redahb]

Same here, seems broken in latest HA (also in all the forks of this project).

[volpi1991]

+1

[Brazier85]

Same for me

[ghost]

@DBuit Any idea? I have the same issue

https://github.com/DBuit/sidebar-card/issues/45

[ronaldvdmeer]

See my comment here for a possible workaround; https://github.com/DBuit/sidebar-card/issues/45#issuecomment-1586261590

[Andreasjkoch]

Hmm, you do actually seem to be right about the vertical-stack being present. This must have changed recently, possibly due to a Home Assistant update. I have not touched my dashboards since this post and the bottom card has gotten a lot more reliable. (So much, that it has not failed loading for the last 10 minutes where I just spam reloaded the dashboard). Also this is not only working with a vertical-stack , some of my dashboards only use horizontal-stack and that seems to work just as well. Weird.

Edit: It does still fail.

[ronaldvdmeer]

Edit: It does still fail.

I’ve been refreshing it for a long time now but can’t get it to fail.

[503Dev]

I've worked with this a bit. The conclusion that having a subsequent view start with "vertical-stack" is true, in fact if you have a multi-view dash that has one view that starts with "vertical-stack" and then move to another unsatisfactory view without refreshing then the bottom-card continues to work.

I am working on debugging this now in an effort to figure it out but the curious part is that even forcing the bottom-card type to "vertical-stack" and the tag to "hui-vertical-stack-card" still fails. I may have to rewrite some additional logic. None the less, the original author did a pretty good job and the code is well structured.

[vednolacni]

is there any update about this problem?

[ronaldvdmeer]

Due to no response from the author I believe this repository is no longer maintained and this problem won't get solved until someone forks the code and continues maintaining it.

[ahlstromanton]

Due to no response from the author I believe this repository is no longer maintained and this problem won't get solved until someone forks the code and continues maintaining it.

It's alive - latest release two weeks ago! :)

[ronaldvdmeer]

It's alive - latest release two weeks ago! :)

And even better. There already was a reply on this topic from @DBuit https://github.com/DBuit/sidebar-card/issues/45#issuecomment-1821087978

[gianniocchipinti]

any news?

[Andreasjkoch]

Not that I know of 🤷🏻‍♂️

[gianniocchipinti]

solve with template card:

  bottomCard:
    type: custom:layout-card
    cardStyle: |
      :host {
        width: 100%;
      }
    cardOptions:
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: 1fr 100 100px 1fr
        grid-template-rows: 100px 100px
        grid-template-areas: |
          "s1 s2 s3 s4"
          "meteo"
      cards:
        - type: custom:button-card
          color_type: blank-card
          card_mod:
            style: |
              ha-card{
                background: transparent
          styles:
            card:
              - height: 5px
              - padding: 0px
        - type: custom:simple-weather-card
          entity: weather.casa
          name: ' '
          backdrop:
            day: ''
            night: '#40445a'
          grid_area: meteo

[madface303]

Followed the way from gianniocchipinti, and in my case it seem to work. About a week now, and the bottom card did not disappear on my wall mounted tablet.

[tobbi007]

I also added a comment here. Not sure if it is a proper fix though.

https://github.com/DBuit/sidebar-card/issues/45

[Tman-Tech]

FIXED FOR ME!!! I changed the type value from horizontal stack to the custom card I wanted. then deleted "cards:" and "type". See pictures attached for before and after.