[BUG] The card is not displayed properly with a sidebar

[michaelkaravani]

Describe the bug The card is not displayed properly with a sidebar card In edit mode everything is displayed fine Before the latest HA update everything works fine

To Reproduce Steps to reproduce the behavior: 1.Create a new dashboard 2.edit dashboard 3.raw configuration editor 4.set up minimal side bar config 5.set up floor plan card

Expected behavior That the SVG image will appear inside the card Instead as in the picture it appears inside the upper navigation.

Screenshots

1. the home.svg insdie top menu (this the bug)

   

2. this edit card mod (all ok)

   

3.this is how it need to display (This is how it appeared before the update)

my SVG file

• (https://gofile.io/d/bPVdnF)

Desktop (please complete the following information):

• OS: windows 10
• Browser: chrome
• Version: 111.0.5563.147

Share configuration ---YAML--- this is beeter view home.yaml

sidebar:
  digitalClock: true
  date: true
  hideTopMenu: false
  width:
    mobile: 20
    tablet: 25
    desktop: 20
  sidebarMenu:
    - action: navigate
      navigation_path: /dashboard-tab/0
      name: ראשי
      active: true
      hold_action:
        action: none
views:
  - title: Home
    panel: true
    badges: []
    cards:
      - type: custom:floorplan-card
        full_height: true
        config:
          image: /local/floorplan/home1.svg
          stylesheet: /local/floorplan/home.css
          defaults:
            hover_action: hover-info
            tap_action: more-info
          rules:
            - name: switches
              entities:
                - entity: switch.sonoff_10006440e7
                  element: switch.sonoff_10006440e7
                - entity: switch.1gang_wifi_switch_switch_1
                  element: switch.1gang_wifi_switch_switch_1
                - entity: switch.sonoff_100020a592_1
                  element: Elevators-up-button
              tap_action: toggle
              hold_action:
                action: more-info
              state_action:
                - action: call-service
                  service: floorplan.class_set
                  service_data: light-${entity.state}
            - entity: sensor.time
              element: sensor-time-text
              state_action:
                action: call-service
                service: floorplan.text_set
                service_data: ${entity.state.toUpperCase()}
              tap_action: false
            - name: OriginalClockValue
              element: sensor-time-text
              entities:
                - sensor.time
              state_action:
                - service: floorplan.text_set
                  service_data: ${entity.state}

---CSS--- this better view home.css

/* SVG shapes */

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

/* Hover over */

.entity:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Bootstrap succsss */

.success-text {
  fill: #3c763d !important;
}

.success-background, .success-text-background {
  fill: #dff0d8 !important;
  fill-opacity: 1 !important;
  stroke: #d6e9c6 !important;
  stroke-width: 1px !important;
}

/* Bootstrap info */

.info-text {
  fill: #31708f !important;
}

.info-background, .info-text-background {
  fill: #d9edf7 !important;
  fill-opacity: 1 !important;
  stroke: #bce8f1 !important;
  stroke-width: 1px !important;
}

/* Bootstrap warning */

.warning-text {
  fill: #8a6d3b !important;
}

.warning-background, .warning-text-background  {
  fill: #fcf8e3 !important;
  fill-opacity: 1 !important;
  stroke: #faebcc !important;
  stroke-width: 1px !important;
}

/* Bootstrap danger */

.danger-text {
  fill: #a94442 !important;
}

.danger-background, .danger-text-background {
  fill: #f2dede !important;
  fill-opacity: 1 !important;
  stroke: #ebccd1 !important;
  stroke-width: 1px !important;
}

/* Last motion entity */

.last-motion {
  stroke: #808080 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Alarm Panel */

.alarm-disarmed {
  fill: #3c763d !important;
}

.alarm-armed {
  fill: #8a6d3b !important;
}

/* Camera */

.camera-idle {
/*  fill: #B9CEF7 !important; */
  fill: #6FAECE !important;
}

/* Light */

.light-off {
  fill: #C3B7F4 !important;
}

.light-on {
  fill: #F8D2B9 !important;
}

/* Doorbell */

.doorbell-off {
  fill: #C3B7F4 !important;
}

.doorbell-on {
  fill: #F8D2B9 !important;
}

/* Temperature sensor */

.temp-very-low-background {
  fill: #d9edf7 !important;
  fill-opacity: 1 !important;
}

.temp-below-average-background {
  fill: #dcefe8 !important;
  fill-opacity: 1 !important;
}

.temp-average-background {
  fill: #dff0d8 !important;
  fill-opacity: 1 !important;
}

.temp-very-high-background {
  fill: #f2dede !important;
  fill-opacity: 1 !important;
}

/* Media player */

.squeezebox-off {
  fill: #8AA8A7 !important;
}

.squeezebox-on {
  fill: #2baaa6 !important;
}

[OzGav]

Please reformat your yaml and css using the <> button so we can see the formatting properly

[michaelkaravani]

Please reformat your yaml and css using the <> button so we can see the formatting properly

this not do code ok``` this do code

[OzGav]

Seems like it might be a core HA issue. If you remove the side bar is it ok? Have you cleared the browser cache/tried a different browser/tried incognito mode?

[michaelkaravani]

1. It works without sidebar car.
2. The truth is if I refresh many times it also appears with the side bar but when I refresh again it disappears.
3. I tried with the EDGE browser, same problem

Ok, maybe the problem is with the side bar card Although every other card works well with side bar only floorplan does not

I'll try messing with the code again and see if I can find anything thanks

[exetico]

Hi,

Have you tried it with a stock HA setup? It looks a bit like you'er using a theme and/or frontend things, to customize your HA look. Please check with a default setup.

I have not tried "sidebar car".

Also, please remember to mention the HA version, and the ha-floorplan version 😊.

[michaelkaravani]

I changed the theme to default still the same problem.

If I refresh many times (F5) Suddenly it does appear

But when I refresh again it disappears again

my home assistant virsion

Home Assistant 2023.4.2
Supervisor 2023.04.0
20230406.1 - latest

but in my HA log I have it and it seems to be the problem

But I'm not the only one with the problem So I follow it this topic

[OzGav]

Ok if this is a sidebar card problem then feel free to close this

[michaelkaravani]

Ok if this is a sidebar card problem then feel free to close this

Ok, I'll check what's going on and if the problem is really there, I'll close here

[exetico]

You've still not reported if it works every time without sidecar? :-)

[michaelkaravani]

I said it works fine without a sidebar in the message before you told me to check the theme and version of HA

[exetico]

Oh, sorry! My bad.

[michaelkaravani]

Oh, sorry! My bad.

all good nothing bad happened

[michaelkaravani]

He fixed the problem with sidbar card update

1. I cleared the cache in my chrome.
2. I tried with a edge browser.
3. I tried with default theme.
4. i do restart to my server.

I still have a problem only when I refresh the card appears.

[exetico]

What's the network resource loading stack? Is the SVG file loaded the first time? Are you able to see more in our logging area, if you enable extended logging? (I'm on the phone, so I can't remember the specific flag value)

Does the sidecar manipulate things in other elements like ha-floorplan?

Does it still work if you disable sidecar, as you mentioned before?

If so, it's a sidecar issue, more than a floorplan issue. I could give it a look at some point, but with 32 open issues, no PR merges and more in the sidecar repo, I dont really see a point to support sidecar - if the dev. of sidecar doesnt get up to speed with the open issues 😊.

[michaelkaravani]

What's the network resource loading stack? Is the SVG file loaded the first time? Are you able to see more in our logging area, if you enable extended logging? (I'm on the phone, so I can't remember the specific flag value)

Does the sidecar manipulate things in other elements like ha-floorplan?

Does it still work if you disable sidecar, as you mentioned before?

If so, it's a sidecar issue, more than a floorplan issue. I could give it a look at some point, but with 32 open issues, no PR merges and more in the sidecar repo, I dont really see a point to support sidecar - if the dev. of sidecar doesnt get up to speed with the open issues 😊.

ok i got you I'm not looking to give you more work. I will try to find a solution. Thanks anyway..

[michaelkaravani]

I'm just updating how I solved the problem in the meantime If anyone else is having my problem Here is what I did