Curious if anyone can get the sidebar to load/work on a tablet? I have an old iPad that I’m trying to use but it just won’t load.
I have it working on an old ipad air 2 using the home assistant app. I have to pull down and refresh the page once its loaded and then the sidebar shows up.
Also, check that you have the tablet device set in the config from the read me example.
Ah, I was loading through an internet browser - tried to download HA and apparently my iPad is too old for it. Bummer!
Hello! some people has been talking about the card only shows after refreshing the page, it’s happening to me right now and it’s annoying. Any solution to this? this is happening on chrome and firefox.
@DBuit Good job!! I am using sidebar-card with picture-element and home-kit-card.
How can I solve this problem (photo). How do I reduce the height of the sidebar? I’ve tried with breakpoints but it doesn’t change anything.
Hi friends.
Can’t get the sidebar to show?
I don’t understand what could happen.
Can someone help me? Thanks
Well i tried to add sidebar
sidebar:
title: "Home"
#digitalClock: true
#digitalClockWithSeconds: true
date: true
# width:
# mobile: 20
# tablet: 25
# desktop: 20
i decided to go easy with just the date
i dont know why but it show up only on my tablet and not on my desktop
why? O.o any suggestion?
edit 13/06
well i discovered a weird response…
i’v got 2 ui
Tablet 1 is the first without sidebar card
Tablet 2 is the second one where i do the test with sidebar card…
when i open tablet 2 first time the sidebar is there if i switch to talet 1 and then again to tablet 2 the sidebar disappears…
Loving the sidebar card.
Does anyone know how I can get a markdown card to show above the navigation?
I’d ideally like to have the time and date, and then below the date a greeting, and then the navigation and then any bottom cards.
Would you be willing to share the yaml/css for your setup? I’m a bit over my head when it comes to getting started with this; having a good starting point to build from would be really helpful. Happy to receive it privately, if you prefer.
Hi
Im having a problem where my sidebar doesn’t show up.
It shows up on laptop when i refresh the page but with my tablet it doest ever show up( i have tried the official app and directly with web browser)
Other info:
- Im using latest on every integration and operating system
- 3x dashboards
- Latest sidebar card version from hacs
Please help me…
1 Like
Hi,
Can anyone explain how to give custom text on the side bar a color?
If i would place a quote text on the sidebar, anyway to give it for example a green color?
Thanks for this great sidebar!
I would like to combine the use of this sidebar with original top bar.
At the moment the clock falls behind the top bar when I leave it enabled.
Is there an easy way to lowwer it a bit to prevent this from happening?
thanks in advance,
Martijn.
I am having the exact same issue, have you managed to find a solution yet?
Hi
Someone suggested using the app called “Fully kiosk browser”. I did try it with that and it seemed to work. It seems to be the Best option at the moment… I havent had time to test it much yet but you definately should try it at least. Its available on Google play store.
Updated Sidebar Card today (via HACS) and all my CSS formatting I added to sidebar-card.js was gone. Looks like it replaces it in www/community/sidebar-card.
I had to rename the .gz file and then restore sidebar-card.js from last nights backup to get my formatting back.
If you update via HACS and have added formatting, be sure to backup the old .js file first, and then after updating Sidebar Card rename the .gz file before restoring your sidebar-card.js backup.
Unfortunately still nothing.
EDIT: Just updated last release fixed my issue.
Thanks
I have gone through the thread from the beginning and did the step by step. All worked a expected and I have a functioning sidebar. Here is what it looks like and the code:
title: Estate Dashboard
name: estate-dashboard
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: false
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
width:
desktop: 15
mobile: 15
tablet: 20
breakpoints:
mobile: 768
tablet: 1024
template: |
<li>
{% if now().hour < 5 %} Good night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good evening {{'\U0001F44B\U0001F3FB'}}{% endif %}{{user}}
</li>
style: |
:host {
--sidebar-background: #FFF;
--sidebar-text-color: #000;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
box-shadow: inset -11px 0px 6px 1px #1d1f1f;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 35px!important;
}
.sidebarMenu li ha-icon {
}
.sidebarMenu li.active {
background-color: #2C2E30!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
font-size: 50px !important;
font-weight: 500!important;
text-align: center;
}
.date {
padding-bottom: 10px;
font-size: 25px;
font-weight: 300;
text-align: center;
}
sidebarMenu:
- action: navigate
active: true
name: MAIN
icon: mdi:bullseye
navigation_path: /estate-dashboard/main
- action: navigate
active: true
name: HOUSE
icon: mdi:home-outline
navigation_path: /estate-dashboard/house
- action: navigate
active: true
name: GALLERY
icon: mdi:car-multiple
navigation_path: /estate-dashboard/gallery
- action: navigate
active: true
name: GUEST HOUSE
icon: mdi:home-floor-g
navigation_path: /estate-dashboard/guest-house
- action: navigate
active: true
name: CABANA
icon: mdi:pool
navigation_path: /estate-dashboard/cabana
- action: navigate
active: true
name: GROUNDS
icon: mdi:home-group
navigation_path: /estate-dashboard/grounds
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
icon: mdi:shield-home
action: navigate
navigation_path: /estate-dashboard/security/
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
action: navigate
navigation_path: /estate-dashboard/settings/
icon: mdi:cog-sync-outline
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
views:
- title: MAIN
path: main
theme: Caule Black Orange
badges:
- entity: person.haz
cards:
- type: custom:weather-card
entity: weather.openweathermap
number_of_forecasts: '5'
- title: HOUSE
path: house
theme: Caule Black Orange
icon: mdi:bullseye
badges:
- entity: person.haz
cards: []
- title: GALLERY
path: gallery
theme: Caule Black Orange
icon: mdi:home-outline
badges: []
cards: []
- title: GUEST HOUSE
path: guest-house
theme: Caule Black Orange
icon: mdi:home-floor-g
badges: []
cards: []
- title: CABANA
path: cabana
theme: Caule Black Orange
icon: mdi:pool
badges: []
cards: []
- title: GROUNDS
path: grounds
theme: Caule Black Orange
icon: mdi:home-group
badges: []
cards: []
- title: SECURITY
path: security
theme: Caule Black Orange
icon: mdi:shield-home
badges: []
cards: []
- title: SETTINGS
path: settings
theme: Caule Black Orange
icon: mdi:cog-sync-outline
badges: []
cards: []
Now I am on to the formatting which is a whole new world for me, so I have a few questions hoping someone can help. I am all for learning by doing, so if there is a guide about how to style all these elements, please let me now so I can figure out the possibilities.
- How do I make the sidebar background match the theme of the dashboard? I tried adding transparent !important where I needed it to be transparent, but it is not working. I change the fonts to black and the background to transparent, and the fonts actually do change to white but the background remains white. If I change the background to black, it also does not change. I am using a theme for my dashboard.
- Is it normal that for every change, I have to exit the edit more, AND refresh my browser?
- How do I add those horizontal lines under the date, and under the menu. Some screenshots above show those, and I like to add them to show the sections of the sidebar.
- The navigation_url for the bottom card is not working. Not sure what I am missing
- How do I change the menu item highlight from the black and blue accent to something else? Where is that coded?
- For mobile, as the code is written above, the sidebar shows as 15%, and the icons for the menu are shown clearly, but it seems that the actual sized sidebar is in the background. I can see the blue highlights for the menu selected, and the clock. Is this an artifact of my setup or did I miss a setting?
- The crazy thing is on the mobile, the sidebar has a black/gray background. Where is that being set?
- For the bottom card, can I have multiple rows? I don’t want to have the button get smaller and smaller if I add more. Can I add 2 rows of 2 for a total of 4? I want to be able to add some entities for the button-card and need them to be readable a little, so 2 per row is plenty. Can I also make them squares? so I have more area to add content like this one from github:
I know it is a bunch of items, but I am trying to get to a spot where the sidebar is done and I am happy with it so I can start developing the main section of each tab. It’s been a hell of a learning curve and it’s great what this Sidebar can do. Thank you to all contributors.
EDIT 1: added a screenshot of what I see on my mobile.
EDIT2: Figured out #4 from above. Had misread the documentation. Should be the following:
- type: custom:button-card
color_type: card
color: rgb(255, 255, 255)
tap_action:
action: navigate
navigation_path: /estate-dashboard/settings
icon: mdi:cog-sync-outline
2 Likes
Is it possible to only hide the top menu on mobiles (something like hideTopMenuOnMobile)?
Or is there a other way to get into the dashboard editor and the raw configuration editor once the topmenu is disabled?