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
-
the home.svg insdie top menu (this the bug)

-
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)
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, I’ll check what’s going on and if the problem is really there, I’ll close here