ha-floorplan: [BUG] The card is not displayed properly with a sidebar

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

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;
}

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

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

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