sidebar-card
sidebar-card copied to clipboard
DBuit
Bottom card not showing
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
Same here, seems broken in latest HA (also in all the forks of this project).
@DBuit Any idea? I have the same issue
https://github.com/DBuit/sidebar-card/issues/45
See my comment here for a possible workaround; https://github.com/DBuit/sidebar-card/issues/45#issuecomment-1586261590
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.
Edit: It does still fail.
I’ve been refreshing it for a long time now but can’t get it to fail.
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.
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.
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! :)
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
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
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.
I also added a comment here. Not sure if it is a proper fix though.
https://github.com/DBuit/sidebar-card/issues/45
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.
