I have exactly the same issue since months. For me it seems, that nobody is working on a fix. I’m almost at removing all of the bottom cards, since it is not reliable.
try some of these settings and have a play with it
style: |
ha-icon {
--mdc-icon-size: 36px;
}
.sidebarMenu li {
color: var(--sidebar-text-color, #000);
position: relative;
padding: 10px 20px;
border-radius: 12px;
font-size: 32px !important;
line-height: 32px !important;
font-weight: 300;
white-space: normal;
display: block;
cursor: pointer;
}
h1.digitalClock {
font-size: 100px !important;
line-height: 80px !important;
font-weight: 300 !important;
cursor: default;
}
h2 {
margin: 0;
font-size: 36px !important;
line-height: 32px !important;
font-weight: 200;
color: var(--sidebar-text-color, #000);
cursor: default;
}
Hi,
I use lovelace-wallpanel ( GitHub - j-a-n/lovelace-wallpanel: 🖼️ Wall panel mode and photo screensaver for your Home Assistant Dashboards ) and since I installed sidebar-card, I get this error.
http://192.168.1.xx:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740194:18635:23 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')
if I remove wallpanel, I no longer have an error.
Any other users having the same issue?
a workaround?
ps:
issue report Cannot read properties of null (reading 'shadowRoot') · Issue #95 · DBuit/sidebar-card · GitHub
Hey Freddan101,
did you even find a solution for this?
I have the same issue…
Wonder if someone can help me with an odd bottom card issue please, it’s driving me crazy.
I’m trying to create a stack of four people cards on there but when I add the fourth card they all fail to show. Using the exact same code elsewhere on a dashboard works fine. After having a good play around with it for a while I’ve worked out it’s the aspect_ratio line that seems to be giving it the problem, If I remove it on any one of the cards then they all appear but with major formatting issues on the one I’ve changed.
Also worked out that it doesn’t have to be anything as complex as this. If I create four basic cards with just person name and entity picture with a specified aspect_ratio value then it fails to show up too.
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.flateric
aspect_ratio: null
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: '#1a2636'
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: >-
"icon status" "n n" "battery proximity" "wifi ss" "sd
sd"
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: '#FFF'
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: '#FFF'
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: '#FFF'
- '--text-wifi-color-sensor': >-
[[[ if
(states["sensor.paul_phone_wifi_connection"].state
== '<not connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: '#FFF'
- '--text-color-sensor': >-
[[[ if
(states["sensor.paul_phone_battery_level"].state <
50) return "#EF4F1A"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (states['person.flateric'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> Away</span>`;
}
if (states['person.flateric'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.home_paul'].state} Mi</span></span>`
]]]
battery: |
[[[
if (states['sensor.paul_phone_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.paul_phone_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.paul_phone_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.paul_phone_wifi_connection'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.paul_phone_wifi_connection'].state}</span></span>`;
}
]]]
- type: custom:button-card
entity: person.emzi
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
hi, Since the update 202.4.6 i’ve had this problem with my floorplan it’s as if the image was cut in two can someone help me with that plz?
I had the same when using the standard Horizontal and Vertical stack.
I switch to layout-card and created a grid. This works fine.
My code is as follows.
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: |
". home away ."
". bedtime vacation ."
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0px;
background:transparent;
}
:host {
--mush-icon-size: 60px;
--mush-icon-symbol-size: 0.6em;
}
primary: ''
icon: mdi:home-import-outline
layout: vertical
entity: script.thuis
icon_color: |-
{% if is_state('input_text.current_status', 'Home') %}
green
{% endif %}
view_layout:
grid-area: home
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0px;
background:transparent;
}
:host {
--mush-icon-size: 60px;
--mush-icon-symbol-size: 0.6em;
}
primary: ''
icon: mdi:home-export-outline
layout: vertical
entity: script.away
icon_color: |-
{% if is_state('input_text.current_status', 'Away') %}
green
{% endif %}
view_layout:
grid-area: away
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0px;
background:transparent;
}
:host {
--mush-icon-size: 60px;
--mush-icon-symbol-size: 0.6em;
}
primary: ''
icon: mdi:weather-night-partly-cloudy
layout: vertical
entity: script.bedtime
icon_color: |-
{% if is_state('input_text.current_status', 'Sleep') %}
green
{% endif %}
view_layout:
grid-area: bedtime
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0px;
background:transparent;
}
:host {
--mush-icon-size: 60px;
--mush-icon-symbol-size: 0.6em;
}
primary: ''
icon: mdi:bag-suitcase
layout: vertical
entity: script.vacation
icon_color: |-
{% if is_state('input_text.current_status', 'Vacation') %}
green
{% endif %}
view_layout:
grid-area: vacation
1 Like
Hi community,
Really loving this card and I’m almost ready with what I want from this card. I’m struggling with marking the active page in the sidebar. I saw a lot of people in this forum that were able to do so but the CSS doesn’t apply for me. When do I “inspect element” in my browser, I see there isn’t an active class on the li. Any tips?
Below is my full sidebar code.
sidebar:
title: null
digitalClock: true
clock: false
twelveHourVersion: false
date: true
dateFormat: "DD MMMM YYYY"
width: 25
hideTopMenu: false
sidebarMenu:
- action: navigate
navigation_path: "home"
name: "Home"
icon: "mdi:home-assistant"
active: true
- action: navigate
navigation_path: "lights"
name: "Lights"
icon: "mdi:ceiling-light"
- action: navigate
navigation_path: "media"
name: "Media"
icon: "mdi:play-circle-outline"
- action: navigate
navigation_path: "sensors"
name: "Sensors"
icon: "mdi:radio-tower"
- action: navigate
navigation_path: "dev"
name: "Dev"
icon: "mdi:xml"
style: |
:host {
--sidebar-background: var(--primary-background-color);
--sidebar-text-color: var(--primary-text-color);
}
.sidebarMenu li {
line-height: 35px!important;
color: var(--primary-text-color) !important;
}
.sidebarMenu li ha-icon {
color: var(--primary-text-color)!important;
}
.sidebarMenu li.active {
color: yellow !important;
}
.sidebarMenu li.active ha-icon {
color: yellow !important;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
h1 {
text-align:center;
}
template: |
{% if not "None" in states('sensor.recycleapp_tomorrow') %} <li>Set {{ sensor.recycleapp_tomorrow }} outside tonight!</li> {% else %} <li>No garbage tomorrow</li> {% endif %}
bottomCard:
type: custom:mini-graph-card
cardOptions:
entities:
- sensor.outside_temperature
show:
name: false
icon: false
name_adaptive_color: true
hour24: true
smoothing: true
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
ha-card {
background: transparent;
color: #FFF;
overflow: hidden !important;
box-shadow: none !important;
}
1 Like
think it is your navigation_path.
In my case it is: /dashboard-tablet/home
If you only have one dashboard it is porbably something like: /lovelace/home
The navigation is working fine to go to another view that is in the same yaml file. It’s marking the active page with CSS in the sidebar where I’m having issues. Is this related somehow?
Hello. I’m getting a black border next to my sidebar. it only appears on the floormaps. Does anyone have any idea how to fix this?
sidebar:
date: true
dateFormat: dddd, MMMM Do
clock: false
digitalClock: true
twelveHourVersion: true
hideTopMenu: true
hideHassSidebar: true
showTopMenuOnMobile: true
period: true
width:
mobile: 0
tablet: 25
desktop: 16
breakpoints:
mobile: 768
tablet: 1024
sidebarMenu:
- action: navigate
navigation_path: /dashboard-plattegrond/Home
name: Beneden
active: true
icon: mdi:home
- action: navigate
navigation_path: /dashboard-plattegrond/boven
name: Boven
active: true
icon: mdi:home
- action: navigate
navigation_path: /dashboard-plattegrond/cameras
name: Camera's
active: true
icon: mdi:cctv
1 Like
Hello i have now added the sidebar but then on all my dashboard i got this error. Does somenone has a fix? Also mei first dash change from user interface to Yaml en i can not open it anymore. I hope someone can help me.
I have tried everything the instruction said but I can’t seem to make it work!
Ive added the custom repository in 3 different ways, ive added it to my configuration.yaml, ive added it to my raw configurator in my dashboard and still I can’t make it work. I thought it was my code so I copied one of the codes here and still nothing.
How do I activate it?
I have the same problem
anyone found a way to make the analogue clock smaller? i like the idea and look of it a lot. but i want it to be smaller and centered on the sidebar. it takes up to much imo.
I have the below for the digital clock, just right click on the analogue clock and inspect it, you should be able to find something to change the size.
This was the solution to the same problem I had with the selected page not being highlighted in the sidebar. Once I put in the full path (copy and paste from the address line at the top of the browser) it worked a treat.
1 Like
I have the same issue where sometimes the Bottomcard displays and sometimes it doesn’t. It’s really random and more often than not it doesn’t load - very frustrating as I cannot trust it to display reliably so reluctant to put any data or buttons in this area but love the sidebar- card and want to utilise it as best I can.
Can someone advise what the problem might be please?
1 Like
Oh and it shifts off the bottom of the page I wonder if this is related to the display issue?
Thanks very much for the help