I have a button card designed and placed in 2 different places on my dashboard.
Both look identical and work just fine. Here are the views:
the one on the left is in a sidebar, the other one is part of the main layout.
This is the code for the pop-up. Same code for both.
The code to fire up the main layout card:
type: grid
columns: 1
square: false
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_tiny_person
entity: person.haz
tap_action: !include manticore_main_views/haz.yaml
The code to fire up the sidebar:
people:
card:
type: custom:button-card
template: buttons_sidebar_people_layout
custom_fields:
person1:
card:
type: custom:button-card
template: button_tiny_person
entity: person.haz
tap_action: !include manticore_main_views/haz.yaml
The event works from the main layout, not from the sidebar card though.
From the sidebar card, I get the following content in the pop-up:
This is the code for the haz.yaml
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
deviceID: this
hide_header: false
title: Haz
size: normal
content:
type: custom:button-card
entity: person.haz
name: Person
show_entity_picture: false
show_name: false
show_icon: false
hold_action:
action: none
styles:
card:
- height: 400px
- width: 400px
- border-radius: 5%
- padding: 5%
- font-size: 16px
- justify-self: start
- align-self: middle
grid:
- grid-template-areas: >-
"icon icon" "zone zone" "address address" ". ." "car-proximity battery"
"car-time wifi" "air-proximity ."
- grid-template-columns: 1fr 1fr
- grid-template-rows: 200px 20px 25px 15px 25px 25px
custom_fields:
icon:
- clip-path: circle()
- width: 150px
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: darkred
- border-radius: 100px
- justify-self: center
- opacity: 1
zone:
- align-self: middle
- justify-self: start
address:
- align-self: middle
- justify-self: start
- padding-left: 31px
car-proximity:
- align-self: middle
- justify-self: start
car-time:
- align-self: middle
- justify-self: start
- padding-left: 31px
air-proximity:
- align-self: middle
- justify-self: start
wifi:
- align-self: middle
- justify-self: start
- "--text-wifi-color-sensor": >-
[[[ if (states["sensor.haz_main_phone_wifi_connection"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- "--text-color-sensor": >-
[[[ if (states["sensor.haz_main_phone_battery_level"].state < 50) return
"#EF4F1A"; ]]]
state:
- value: "home"
styles:
custom_fields:
icon:
- border-color: rgb(68, 115, 158)
- value: "office"
styles:
custom_fields:
icon:
- border-color: "#4F7942"
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
battery: |
[[[
if (states['sensor.haz_main_phone_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="font-size: 25px; width: 20px; height: 20px; padding-right: 10px;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.haz_main_phone_battery_level'].state}% battery</span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="font-size: 25px;width: 20px; height: 20px; padding-right: 10px;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.haz_main_phone_battery_level'].state}% battery</span>`;
}
]]]
wifi: |
[[[
if (states['sensor.haz_main_phone_wifi_connection'].state =='<not connected>') {
return `<ha-icon
icon="mdi:wifi"
style="font-size: 25px;width: 20px; height: 20px; padding-right: 10px;">
</ha-icon><span>Disconnected</span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="font-size: 25px;width: 20px; height: 20px; padding-right: 10px;">
</ha-icon><span>${states['sensor.haz_main_phone_wifi_connection'].state}</span>`;
}
]]]
I know the pop-up code works as it is all good when I click on the person button-card located on the main layout. Both are pointing to the same haz.yaml.
Not sure what could be wrong here.
Also both sidebar.yaml (which includes the sidebar cards), and the main.yaml, which includes the main file, both are in the same directory, so can’t be a file relational issue.
Any ideas what could be going wrong or where I can stat looking?