Lovelace: custom sidebar card

boxter91 · April 29, 2023, 5:45pm

Can some one help me with this weird thing. The tablet dashboard leaves top part empty (fully kiosk browser. Pc view is normal.

kiosk_mode:
  admin_settings:
    hide_header: false
  non_admin_settings:
    hide_header: true
    hide_sidebar: true
    ignore_entity_settings: false
sidebar:
  title: Koti
  digitalClock: true
  date: true
  sidebarMenu:
    - action: navigate
      navigation_path: testi-dash/huoneet
      name: Koti
      active: true
    - action: navigate
      navigation_path: /testi-dash/tab-lamput
      name: Lamput
      active: true
    - action: navigate
      navigation_path: /testi-dash/lammot
      name: Lämmöt
      active: true
    - action: navigate
      navigation_path: /testi-dash/saatiedot
      name: Sää
      active: true
    - action: navigate
      navigation_path: /testi-dash/vacuum
      name: Imuri
      active: true
  template: >
    <li>
      {% if now().hour  < 5 %} Hyvää Yötä {{'\U0001F634'}}
      {% elif now().hour < 12 %} Hyvää Huomenta {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Hyvää Päivää {{'\U0001F44B\U0001F3FB'}}
      {% else %} Hyvää iltaa {{'\U0001F44B\U0001F3FB'}}{% endif %}



    </li> <li> Sisällä on
    {{states('sensor.ble_temperature_keittion_lampomittari')}} Astetta</li> 



    <li>  </li> <li>Ulkona on
    {{states('sensor.ble_temperature_ulkoanturi_ruuvi')}} Astetta</li>  <li>
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: sensor.sm_x200_battery_level
            - type: weather
              entity: weather.kortesuo
              show_temperature: true
              show_conditions: false
  width:
    mobile: 0
    tablet: 16
    desktop: 16

ameisenba3r · April 30, 2023, 6:11pm

I’m having the same issue. Commenting to hopefully find the solution as well.

bjm · April 30, 2023, 6:34pm

Hey all, not sure when this happened but very strange

sidebar:
  title: null
  width:
    mobile: 0
    tablet: 25
    desktop: 25
  breakpoints:
    mobile: 600
    tablet: 1300
  date: true
  dateFormat: ddd, DD MMM
  digitalClock: true
  twelveHourVersion: false
  hideHassSidebar: true
  hideTopMenu: false
  showTopMenuOnMobile: true
  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;
    }
  sidebarMenu:

any ideas?
Cheers
Brent

akkaria · May 4, 2023, 6:25am

I’m having the same issue. Seems to have happened since the latest update of Home Assistant.

skank · May 7, 2023, 10:52am

same here, think it needs an update

DBuit · May 8, 2023, 7:31am

i updated the card to fix the new gap on the left.

bjm · May 9, 2023, 3:21am

I am now on Version 0.1.9.3
this is what I get now, on PC and tablets, I have cleared cache, etc as well

DBuit · May 9, 2023, 7:11am

Did you use the reload resource in hass? top right corner 3 dots

bjm · May 9, 2023, 8:24am

yup, I have used it a couple of times

skank · May 10, 2023, 5:12pm

Thank you! working !
Does anybody know how i can get the home assistant button?
On my laptop, the button isnt visible cause i use the custom sidebar card and top menu bar is hided
Maybe i can create a shortcut to it, but i dont know how.
Anyone?

cromelex · May 11, 2023, 10:02am

This fully fixed all the issues I had.

Working flawlessly again. Thanks for the support on this.

bjm · May 11, 2023, 12:04pm

no idea what i’m doing wrong, still doesn’t work for me and when I use it on a mobile it stops scrolling, I have to use the back button to stop the app and open it up again, same with using chrome on the mobile.
If I set hideHassSidebar: false then I can use it again but the sidebar is not hidden

Stenbumling · May 15, 2023, 1:27pm

Is it possible to lock the sidebar size?
or how do i get the bottomcard to scale as well?

mn_box · May 16, 2023, 9:12pm

Running the sidebar on Fully Kiosk Browser for some time now. But after a recent update (I believe to 2023.5) the bottom card disappeared from my tablet. I have tried the ideas mentioned on github (Bottom card issue · Issue #45 · DBuit/sidebar-card · GitHub) without results.

It is still visible on my laptop browsers. Any resolutions to solve this issue?

Thanks!

RS53 · May 25, 2023, 9:54pm

Hi,

I have updated my Home Assistant/Supervisor to latest release and now I cannot move my dashboard page to the left to see an entire row of buttons. I am using grid as layout with columns 25%. If I remove the sidebar card from my dashboard, everything is working fine.

Does anyone know how I can fix this?

Many thanks!!

falco1717 · June 1, 2023, 6:27pm

Hello,

How can I go about changing the font size for the title “people at home” in the sidebar?

  bottomCard:
    type: custom:layout-card
    layout_type: custom:vertical-layout
    layout:
      max_cols: 1
    cardStyle: |
      :host {
        width: 104% !important;
        position: absolute;
        bottom: 0%;
        left: -2%;
      }
      .column.cards {
        max-width: 100% !important;
      }
      .cards > :last-child {
        margin: 0px !important;
      }
      column {
        font-size: 10px !important;
      }
    cardOptions:
      cards:
        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            style: |
              ha-card {
                background: none  !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 4px;
                --card-primary-font-size: 2rem;
                border: none;
              }
        - type: custom:simple-weather-card
          backdrop: false
          entity: weather.openweathermap
          name: ' '
          tap_action:
            action: navigate
            navigation_path: /dashboard-test/meteo
          style: |
            ha-card {
              background: none  !important;
              box-shadow: none !important;
              padding: 0 !important;
              margin: 4px;
              font-size: 1vw;
              border: none;
            }
        - type: custom:mini-graph-card
          tap_action:
            action: none
          show:
            icon: false
            legend: false
            name: false
          entities:
            - sensor.openweathermap_temperature
          font_size: 35
          update_interval: 15
          font_size_header: 9
          hours_to_show: 24
          points_per_hour: 1
          icon: mdi:home-thermometer-outline
          color_thresholds:
            - color: '#4dd2ff'
              value: 0
            - color: '#ffa31a'
              value: 20
            - color: '#ff1a1a'
              value: 0
          style: |
            ha-card, ha-card > div {
              padding: 0px !important;
              border: none;

            }
            ha-card > .header.flex > div, ha-card > .states.flex > div {
              padding: 5px !important;
              font-weight: 500;
            } 
            ha-card > .info.flex > .info__item > .info__item__time {
              display: none;
            }
            ha-card {
              background-color: rgba(40,40,40,0);
            }
            .name > span {
              font-weight: 500 !important;
            }

RS53 · June 9, 2023, 6:56am

Everything is working back as expected, also with latest HASS update.

Xionax · June 11, 2023, 7:08am

I’m not sure but the bottom card often doesn’t work and sometimes does. Basically if you open the dashboard directly it doesn’t but if I switch between multiple dashboards it suddenly appears.

On a refresh of the page this error appears in the console.

sidebar-card.js?hacstag=241825574:18109 Uncaught TypeError: cardElement.setConfig is not a function at sidebar-card.js?hacstag=241825574:18109:33

When switching between dashboards the error does not appear.

stploop · June 25, 2023, 10:15pm

Dear Community,

I need your help to solve my issue, in detail when resize the webpage and come back to full screen losts the formatting of the page.

title: Dashboard
sidebar:
  breakpoints:
    tablet: 1024
    mobile: 768
  width:
    mobile: 0
    tablet: 25
    desktop: 20
  title: null
  clock: false
  digitalClock: true
  digitalClockWithSeconds: true
  twelveHourVersion: false
  date: true
  hideTopMenu: true
  hideHassSidebar: true
  showTopMenuOnMobile: true
  dateformat: dddd, DD MMMM YYYY

  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Home
      active: true
    - action: navigate
      navigation_path: /lovelace/soggiorno
      name: Soggiorno
    - action: navigate
      navigation_path: /lovelace-homekit/kitchen
      name: Kitchen
    - action: navigate
      navigation_path: /lovelace-homekit/bathroom
      name: Bathroom

  template: |
    <li>
      {% if now().hour  < 5 %} Buona Notte {{'\U0001F634'}}
      {% elif now().hour < 12 %} Buon Giorno {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Buon Pomeriggio {{'\U0001F44B\U0001F3FB'}}
      {% else %} Buona Sera {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>

Could you help me to found the root cause of the issue?
Thanks

danielbj66 · July 10, 2023, 10:30am

Hi,

I’m trying to add style to the sidebar, but nothing changes.

  style: |
    :host {
        --sidebar-background: #F5F5F5;
        --sidebar-text-color: #333;
        --face-border-color: #FFF;
        --clock-hands-color: #000;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #333;
        --clock-middle-border: #000;
    }

With this code, no colors are being changed at all.
Anyone know what I’m doing wrong?