Not working in 2023.4

[horve000]

Stopt working after updating to homeassistant 2023.4

[sparment]

@michaelkaravani, attached is a truncated version of my lovelace config file. Please let me know if you see any issues... ui-lovelace copy.txt

[michaelkaravani]

@michaelkaravani, attached is a truncated version of my lovelace config file. Please let me know if you see any issues... ui-lovelace copy.txt

I don't see any problem with your code Just don't understand why you have it twice type: vertical-stack one of which is empty

views:
  - title: "OVERVIEW"
    path: overview
    type: custom:masonry-layout
    layout:
      width: 740
      max_cols: 1
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack <-------
            cards: <------
          - type: vertical-stack
            cards:
              - type: entity-filter
                entities:
                  - binary_sensor.upstairs_motion
                  - binary_sensor.kitchen_occupancy
                  - binary_sensor.guest_room_occupancy
                state_filter:
                  - "on"
                  - "open"
                card:
                  state_color: true
                  show_state: false
                  show_header_toggle: False
                  title: "Motion Detected"

What version of HA are you using? Which version of sidebar card?

[sparment]

Thanks for checking the code. The double vertical-stack was just a typo in what I posted. It's not there in my actual code.

I'm running: Home Assistant 2023.4.6 Supervisor 2023.04.0 Sidebar Card: 0.1.9.2

Just to clarify - the issue I'm having is the bottom card does not consistently appear. And I'm getting the error in my log referenced above.

[michaelkaravani]

Thanks for checking the code. The double vertical-stack was just a typo in what I posted. It's not there in my actual code.

I'm running: Home Assistant 2023.4.6 Supervisor 2023.04.0 Sidebar Card: 0.1.9.2

Just to clarify - the issue I'm having is the bottom card does not consistently appear. And I'm getting the error in my log referenced above.

try to chabge in bottomCard type: vertical-stack to type: horizontal-stack and clear your browser cache. and if it's still giving you problems, try changing the theme to default.

[sparment]

Tried that. No change.

[michaelkaravani]

Tried that. No change.

It works for me. I don't know how else to help you. Maybe someone else who understands the code better than me can help.

[sparment]

Looks like the issue I am having is covered under issue #45 I'll post over there...

[sparment]

@michaelkaravani I've determined the issue has to do with stacking of multiple cards in the bottom card.

If I use the code below I get the error:

bottomCard:
  type: vertical-stack
  cardOptions:
    cards:
       - type: ....
         entity: ...

If I don't do a vertical-stack or horizontal-stack it works fine:

bottomCard:
  type: ...
  cardOptions:
    entity: ...

However, without the stack I don't know how to do multiple cards. Are you using multiple cards in the Bottom Card section? If so, could you share your code?

[michaelkaravani]

@sparment i just copy your bottomCard to chack

for better view

sidebar:
  width:
    mobile: 0
    desktop: 23
  digitalClock: true
  date: true
  hideTopMenu: true
  sidebarMenu:
    - action: navigate
      navigation_path: /dashboard-tab/0
      name: ראשי
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/livingroom
      name: סלון
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/kitchen
      name: מטבח
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/bedroom
      name: חדר שינה
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/bathroom
      name: שירותים
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/front-outside
      name: חוץ קדימה
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/side-outside
      name: חוץ צד
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/back-outside
      name: חוץ אחורה
      active: true
      hold_action:
        action: none
    - action: navigate
      navigation_path: /dashboard-tab/floorplan
      name: תוכנית קומה
      active: true
      hold_action:
        action: none
  bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: weather-forecast
          entity: weather.byt
          show_current: true
          show_forecast: true
          secondary_info_attribute: humidity
          tap_action:
            action: none
        - type: weather-forecast
          entity: weather.byt
          show_current: true
          show_forecast: true
          secondary_info_attribute: humidity
          tap_action:
            action: none

---------------------------------------------------------------- Do not consider that there is no margin, it can be fixed ----------------------------------------------------------------

[sekonicpr]

Looks like the issue I am having is covered under issue #45

I'll post over there...

I confirm that I was able to fix the issue I had with the bottom card using the fix described in this post.

"Go to release and download the latest version.In the file sidebar-card.js find "Bottom card config error!", look to the right there is a string ",2)" replace it with a number greater than 2000.”

I still have the topbar issue in the sidebar as describe above.

[Freddan101]

I too had the "top margin issue" together with the Kiosk Mode-integration until I cleared the cache using payload {"clearCache": true}. So it definitely seems to be cache related.

[sparment]

Thanks @michaelkaravani I see no real differences between your code and mine yet I'm still having the error in my log and the failure to load the bottom cards consistently.

@sekonicpr I made the suggested edit in the sidebar-card.js file, restarted HA and am having the same problem...

[listlesslife]

I'm running the latest release and have tried the applicable suggestions in this thread, but I still have a margin at the top of my side-bar card. The bottom of the card is cut off, too. I am using kiosk-mode. That's because hideTopMenu: true and showTopMenuOnMobile: true shift all of my dashboards up into the top menu on my mobile. Any help would be appreciated. Here's my config:

sidebar:
  style: |
    :host {
        --sidebar-background: 'rgba(0, 0, 0, 0)';
    }
    .date {
         text-align:left;
         font-size:32px;
         margin-top:-20px;
         padding-bottom:0px!important;
     }
     h1.digitalClock {
         font-size:44px!important;
         margin-top:-2px;
         padding-bottom:0px!important;
     }
     .sidebarMenu li {
         margin-left:-16px;
         margin-right:-16px;
         margin-top:-5px;
         margin-bottom:-5px;
         font-size:20px!important;
         line-height: 21px!important;
     }
     .sidebarMenu li.active {
         font-size:22px!important;
         color: #FCC201!important;
         font-weight: bold;
         text-shadow: -2.5px 1px 1px #080808;
     }
     .sidebarMenu li.active ha-icon {
         color: #FCC201!important;
     }
  active: true
  date: true
  dateFormat: ddd, MMM. DD
  digitalClock: true
  showTopMenuOnMobile: true
  twelveHourVersion: true
  period: true
  width:
    mobile: 0
    tablet: 25
    desktop: 20
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/overview
      icon: mdi:home-assistant
      name: Overview
      active: true
    - action: navigate
      navigation_path: /lovelace/kitchen
      icon: mdi:faucet-variant
      name: Kitchen
      active: true
    - action: navigate
      navigation_path: /lovelace/living-room
      icon: mdi:sofa
      name: Living Room
      active: true
    - action: navigate
      navigation_path: /lovelace/game-room
      icon: mdi:nintendo-game-boy
      name: Game Room
      active: true
    - action: navigate
      navigation_path: /lovelace/guest-bathroom
      icon: mdi:paper-roll-outline
      name: 2nd Bathroom
      active: true
    - action: navigate
      navigation_path: /lovelace/hallway
      icon: mdi:coat-rack
      name: Hallway
      active: true
    - action: navigate
      navigation_path: /lovelace/office
      name: Office
      icon: mdi:desk
      active: true
    - action: navigate
      navigation_path: /lovelace/bedroom
      name: Bedroom
      icon: mdi:bed-queen-outline
      active: true
    - action: navigate
      navigation_path: /lovelace/primary-bathroom
      name: Bathroom
      icon: fas:shower
      active: true
    - action: navigate
      navigation_path: /lovelace/patios
      name: Patios
      icon: hue:room-terrace
      active: true
    - action: navigate
      navigation_path: /lovelace/garage
      name: Garage
      icon: mdi:garage
      active: true
    - action: navigate
      navigation_path: /lovelace/observation
      name: Observation
      icon: mdi:magnify
      active: true
  bottomCard:
    type: custom:weather-card
    cardOptions:
      entity: weather.home
      details: false
      hourly_forecast: false
      forecast: true
      current: false
      card_mod:
        style: |
          ha-card .forecast
            div.precipitation_probability {display: none;}
            div.precipitation {display: none;}
          ha-card {

          }
          ha-card div.current span.icon.bigger {
            width: 8em;
            height: 8em;
            margin-top: -4.6em;
          }
          ha-card div.current span.temp {
            font-size: 2.4em;
            right: 3.00em;
            top:0.8em;
          }
          ha-card div.forecast.clear.spacer {
            padding-top: 0.4px;
            margin-top: -2.9em;
          }
      number_of_forecasts: '3'
    cardStyle: |
      :host {
        width:100%;
        height:100%;
        text-size:50%;
        background-color:'rgba(0, 0, 0, 0)';
      }

Thank you.

[olaoups]

@listlesslife For the top margin of your sidebar-card, please try to use the file in my pull request: https://github.com/DBuit/sidebar-card/pull/85

If it works for you too please say me!

[rodrigogbs]

@listlesslife For the top margin of your sidebar-card, please try to use the file in my pull request: #85

If it works for you too please say me!

@olaoups, I tested your JS file and the issue is still the same for me...

[olaoups]

@rodrigogbs I think you have the bug with floorplan. My correction is for the gap issue with kiosk-mode. I don't use floorplan so I don't know how to reproduce. Sorry!

[listlesslife]

@listlesslife For the top margin of your sidebar-card, please try to use the file in my pull request: #85

If it works for you too please say me!

@olaoups Unfortunately, it did not change anything for me. I still have a gap and part of the bottom card is still cut off. I do appreciate the effort, though. Hopefully there's a fix sometime soon.

[listlesslife]

I was able to remove the space above my sidebar-card and regain the bottom of the bottom card by adjusting the top-margin of the digital clock. Previously, I had it set to -2, but after playing around I found -60 pretty much puts everything back to where it was. It's not an elegant fix, but it works for me for now. If anyone is still having this particular issue, it might be worth exploring.

sidebar:
  style: |
    :host {
        ...
    }
     h1.digitalClock {
         margin-top:-60px!important;
         .
         .
     }
    .
    .

[KentuckyMC]

Got the same issue here. When i use the '?sidebarOff' url parameter. It shows the header, but won't put the content down. It's because of that 0px!important inside the #view. When I set the hideTopMenu at false, nothing is wrong, it all seems to work. It's only when you use the hideTopMenu true, and want to debug something with the '?sidebarOff' url parameter. Then it'll show the topmenu, but won't push the content down for it.

[BadgerLoaf]

I was able to remove the space above my sidebar-card and regain the bottom of the bottom card by adjusting the top-margin of the digital clock. Previously, I had it set to -2, but after playing around I found -60 pretty much puts everything back to where it was. It's not an elegant fix, but it works for me for now. If anyone is still having this particular issue, it might be worth exploring.

sidebar:
  style: |
    :host {
        ...
    }
     h1.digitalClock {
         margin-top:-60px!important;
         .
         .
     }
    .
    .

Thanks @listlesslife, this has worked as a temp solution on my tablet running Fully... doesn't extend the background colour to the top of the side bar, and breaks my desktop browser, but they are less of an issue for now.

@DBuit - Have you got any thoughts on how this might be resolved since the upgrade to 2023.4? Anything we can provide you in terms of logs etc? Seems to be related to when using Fully in kiosk mode (my desktop isn't affected). Thanks for your ongoing work with this

[rodrigogbs]

I was able to remove the space above my sidebar-card and regain the bottom of the bottom card by adjusting the top-margin of the digital clock. Previously, I had it set to -2, but after playing around I found -60 pretty much puts everything back to where it was. It's not an elegant fix, but it works for me for now. If anyone is still having this particular issue, it might be worth exploring.

sidebar:
  style: |
    :host {
        ...
    }
     h1.digitalClock {
         margin-top:-60px!important;
         .
         .
     }
    .
    .

Thanks @listlesslife, this has worked as a temp solution on my tablet running Fully... doesn't extend the background colour to the top of the side bar, and breaks my desktop browser, but they are less of an issue for now.

@DBuit - Have you got any thoughts on how this might be resolved since the upgrade to 2023.4? Anything we can provide you in terms of logs etc? Seems to be related to when using Fully in kiosk mode (my desktop isn't affected). Thanks for your ongoing work with this

In addition to this solution, I workarounded the problem on PANEL CONFIG adding this to style:

        style: |
          .container.rows {
            padding: 48px 0px!important;
          }

[DBuit]

For people having the gap issue at the top in the last release should fix this when you use kiok mode to hide top menu.

[KentuckyMC]

Got the same issue here. When i use the '?sidebarOff' url parameter. It shows the header, but won't put the content down. It's because of that 0px!important inside the #view. When I set the hideTopMenu at false, nothing is wrong, it all seems to work. It's only when you use the hideTopMenu true, and want to debug something with the '?sidebarOff' url parameter. Then it'll show the topmenu, but won't push the content down for it.

Still not working in this case described above. When using the hideTopMenu on true, and using the ?sidebarOff queryparam, it will cut the whole window at the top. See image:

[BadgerLoaf]

@KentuckyMC - Don't suppose you still have the temp fix applied that @rodrigogbs shared?

[BadgerLoaf]

For people having the gap issue at the top in the last release should fix this when you use kiok mode to hide top menu.

Thanks @DBuit I can confirm that now works perfectly with kiosk mode (with hidden top menu) in Fully on a tablet

However, without the top menu hidden, the clock now looks higher than it should be? I can confirm that I have removed the temp workaround from @KentuckyMC