lovelace-state-switch
lovelace-state-switch copied to clipboard
Published
20 hours ago •
thomasloven
thomasloven
Some Grid Elements not showing when wrapped inside state-switch
I have an issue on a card that I have created that when inside a state-switch card, does not display correctly and is missing the buttons defined within their grid-areas. The grid layout still exists and is correct but the content is not visible.
This is the card, without state-switch:
This is the card, wrapped inside state-switch:
This is my YAML for the config:
- type: custom:state-switch
view_layout:
grid-area: stat2
justify-self: center
align-self: stretch
entity: hash
transition: flip-y
default: p1
states:
p1:
type: custom:stack-in-card
view_layout:
grid-area: stat2
justify-self: center
align-self: stretch
card_mod:
style: |
ha-card {
border-radius: 15px !important;
padding-top: 2.5%;
box-shadow: 0px 10px 60px -30px rgba(0,0,0,1) !important;
background-color: {{ 'rgba(255,123,0,0.4)' if is_state('sensor.wiser_hot_water', 'On') else 'rgba(0,0,0,0.1)' }};
overflow: hidden;
height: 12vh;
}
@media (max-width: 600px) {
ha-card {
border-radius: 15px !important;
padding: 0% 3% 0% 3%;
box-shadow: 0px 10px 60px -30px rgba(0,0,0,1) !important;
background-color: {{ 'rgba(255,123,0,0.4)' if is_state('sensor.wiser_hot_water', 'On') else 'rgba(0,0,0,0.1)' }};
overflow: hidden;
height: 23.5vh;
}
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: grid
layout:
margin: 0
padding: 0
card_margin: 0
place-items: center
grid-template-rows: 5.5vh 5.5vh
grid-template-columns: >-
minmax(50px, 1fr) minmax(50px, 2fr) minmax(20px,
1fr) minmax(20px, 1fr) 4%
grid-row-gap: 0%
grid-column-gap: 1%
grid-template-areas: |
"icon name button1 button2 ."
"icon name button3 button3 ."
mediaquery:
'(max-width: 600px)':
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: 50% 15.5% 27%
grid-row-gap: 0%
grid-column-gap: 0%
place-items: center
grid-template-areas: >
". icon name ." "button1 button1 button2
button2" "button3 button3 button3 button3"
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: icon
align-self: center
entity: sensor.wiser_hot_water
tap_action:
action: navigate
navigation_path: '#p2'
card_mod:
style:
.: |
:host {
--masonry-view-card-margin: 0px;
}
ha-card {
box-shadow: none;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px;
margin-left: -50px;
background-color: rgba(28,28,28,0) !important;
--card-primary-font-size: 2.3vw;
--card-primary-font-weight: 300;
--card-secondary-font-weight: 100;
--card-secondary-font-size: 1em;
--primary-text-color: black;
--secondary-text-color: black;
--icon-size: 200px;
--icon-symbol-size: 70px;
}
@media (max-width: 1600px) {
ha-card {
margin-left: -50px;
margin-top: 2px;
--icon-size: 150px;
--icon-symbol-size: 40px;
}
@media (max-width:600px) {
ha-card {
--card-primary-font-size: 6vw;
align-items: start;
margin-left: -135px;
margin-top: -10px;
}
mushroom-shape-icon$: >
.shape {
--shape-color: rgba(0,0,0,0.1);
}
{% set
state=states('sensor.wiser_hot_water') %}
{% if state == 'On' %}
.shape {
--shape-animation: ping 1.8s ease-out infinite;
--shape-color: rgba(var(--rgb-orange), 0.2);
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-orange), 0.7);
}
100% {
box-shadow: 0 0 0px 290px transparent;
}
}
.shape ha-icon {
padding-left: 50px;
--icon-animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
{% endif %} .shape ha-icon {
padding-left: 50px;
}
primary: null
secondary: null
icon: mdi:water-boiler
icon_color: >-
{% set mode = states('sensor.wiser_hot_water')
%} {% if mode == 'Off' %} #000000b3 {% elif
mode == 'On' %} black {% else %} grey {% endif
%}
- type: custom:mushroom-template-card
view_layout:
grid-area: name
align-self: center
entity: sensor.wiser_hot_water
card_mod:
style:
.: |
:host {
--masonry-view-card-margin: 0px;
}
ha-card {
box-shadow: none;
align-items: start;
align-self: center;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: -2px;
margin-left: -35px;
background-color: rgba(28,28,28,0) !important;
--card-primary-font-size: 2.3vw;
--card-primary-font-weight: 300;
--card-secondary-font-weight: 100;
--card-secondary-font-size: 1em;
--primary-text-color: black;
--secondary-text-color: black;
--icon-size: 130px;
--icon-symbol-size: 45px;
}
@media (max-width: 600px) {
ha-card {
--card-primary-font-size: 6vw;
align-items: center;
margin-left: -35px;
margin-top: 2px;
}
mushroom-shape-icon$: >
{% set
state=states('climate.wiser_family_room')
%}
{% if state == 'auto' %}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
{% endif %} .shape ha-icon {
padding-left: 50px;
}
mushroom-state-info$: |
.container > .secondary {
margin-top: -5px;
white-space: break-spaces;
line-height: 16px;
}
.container {
width: 100%;
padding-left: 10%;
margin-top: 0px;
}
@media (min-width: 1600px) {
.container {
padding-left: 0%;
}
primary: Hot Water
secondary: >
{% if (state_attr('sensor.wiser_hot_water',
'boost_time_remaining') == 0) and
(states('sensor.wiser_hot_water') == 'Off')
and
(states('sensor.wiser_hot_water_operation_mode')
== 'Manual') %} Manual Mode | OFF {% elif
(state_attr('sensor.wiser_hot_water',
'boost_time_remaining') == 0) and
(states('sensor.wiser_hot_water_operation_mode')
== 'Auto') %} AUTO | Turning {{
state_attr('sensor.wiser_hot_water',
'next_schedule_state')}} {{
states('sensor.hot_water_next_schedule')}} {%
elif state_attr('sensor.wiser_hot_water',
'boost_time_remaining') >= 2 %} BOOST |
{{state_attr('sensor.wiser_hot_water',
'boost_time_remaining')}} minutes {% elif
state_attr('sensor.wiser_hot_water',
'boost_time_remaining') > 0 %} BOOST |
{{state_attr('sensor.wiser_hot_water',
'boost_time_remaining')}} minute {% endif %}
icon: null
tap_action: none
- type: custom:button-card
icon: mdi:power
view_layout:
grid-area: button1
entity: sensor.wiser_hot_water_operation_mode
color_type: card
color: rgba(26,26,26,0.2)
show_state: false
show_icon: true
show_name: false
size: 40%
tap_action:
action: call-service
service: wiser.set_device_mode
service_data:
entity_id: select.wiser_hot_water_mode
mode: Manual
hold_action:
action: call-service
haptic: success
confirmation:
text: >-
Are you sure you sure you'd like to
permantely turn on the Hot Water?
service: button.press
service_data:
entity_id: button.wiser_toggle_hot_water
state:
- operator: template
value: >
[[[ return
(states['sensor.wiser_hot_water_operation_mode'].state.includes
( "Auto")) ]]]
styles:
card:
- background-color: rgba(26,26,26,0.2)
- operator: template
value: >
[[[ return
(states['sensor.wiser_hot_water_operation_mode'].state.includes
( "Manual")) ]]]
styles:
card:
- background-color: '#9e3939'
styles:
grid:
- grid-template-areas: '"I"'
- grid-template-rows: 1fr
- grid-template-columns: 1fr
card:
- box-shadow: none
- border-radius: 7px
- width: 92%
- max-height: 42px
- margin-left: 4%
- padding-top: 15px
- padding-bottom: 15px
icon:
- color: white
card_mod:
style: >
{% if "Auto" in
states['sensor.wiser_hot_water_operation_mode'].state
%}
ha-card:hover {
background-color: #9e3939 !important;
}
{% endif %}
ha-icon {
width: 30% !important;
}
:host {
--masonry-view-card-margin: 0px;
}
#container {
display: flex !important;
}
- type: custom:button-card
icon: mdi:home-clock
view_layout:
grid-area: button2
entity: sensor.wiser_hot_water_operation_mode
color_type: card
color: rgba(26,26,26,0.2)
show_state: false
show_icon: true
show_name: false
size: 40%
tap_action:
action: call-service
service: wiser.set_device_mode
service_data:
entity_id: select.wiser_hot_water_mode
mode: Auto
state:
- operator: template
value: >
[[[ return
(states['sensor.wiser_hot_water_operation_mode'].state.includes
( "Auto")) ]]]
styles:
card:
- background-color: '#358a32'
- operator: template
value: >
[[[ return
(states['sensor.wiser_hot_water_operation_mode'].state.includes
( "Manual")) ]]]
styles:
card:
- background-color: rgba(26,26,26,0.2)
styles:
grid:
- grid-template-areas: '"I"'
- grid-template-rows: 1fr
- grid-template-columns: 1fr
card:
- box-shadow: none
- border-radius: 7px
- width: 92%
- max-height: 42px
- margin-left: 4%
- padding-top: 15px
- padding-bottom: 15px
icon:
- color: white
card_mod:
style: >
{% if "Manual" in
states['sensor.wiser_hot_water_operation_mode'].state
%}
ha-card:hover {
background-color: #358a32 !important;
}
{% endif %}
ha-icon {
width: 30% !important;
}
:host {
--masonry-view-card-margin: 0px;
}
#container {
display: flex !important;
}
- type: custom:button-card
icon: mdi:home-plus
view_layout:
grid-area: button3
entity: sensor.wiser_hot_water
color_type: null
show_state: false
show_icon: true
show_name: false
size: 20%
tap_action:
action: call-service
service: script.1664020445730
state:
- operator: template
value: >
[[[ return
states['sensor.wiser_hot_water'].attributes.is_boosted
== 'true' ]]]
styles:
card:
- background-color: '#9e3939'
- operator: template
value: >
[[[ return
states['sensor.wiser_hot_water'].attributes.is_boosted
=== 'false' ]]]
styles:
card:
- background-color: rgba(26,26,26,0.2)
- operator: template
value: >
[[[ return
states['sensor.wiser_hot_water'].attributes.is_boosted
== '0' ]]]
styles:
card:
- background-color: rgba(26,26,26,0.2)
- operator: template
value: >
[[[ return
states['sensor.wiser_hot_water'].attributes.is_boosted
> '0' ]]]
styles:
card:
- background-color: '#9e3939'
icon: mdi:cancel
- operator: template
value: >
[[[ return
states['sensor.wiser_hot_water'].attributes.is_override
> '0' ]]]
styles:
card:
- background-color: '#9e3939'
icon: mdi:cancel
styles:
grid:
- grid-template-areas: '"I"'
- grid-template-rows: 1fr
- grid-template-columns: 1fr
card:
- box-shadow: none
- border-radius: 7px
- width: 96%
- max-height: 42px
- margin-left: 2%
icon:
- color: white
card_mod:
style: >
{% if (state_attr('sensor.wiser_hot_water',
'is_boosted') == 0 ) %}
ha-card:hover {
background-color: #9e3939 !important;
}
{% elif
(state_attr('sensor.wiser_hot_water',
'is_boosted') == 1 ) %}
ha-card:hover {
background-color: black !important;
}
{% endif %}
ha-icon {
width: 15% !important;
}
:host {
--masonry-view-card-margin: 0px;
}
#container {
display: flex !important;
}
p2:....
Interestingly, I left the page open overnight and the buttons have appeared. Upon refresh they disappear again...
If I use a duplicate of the card, without being wrapped within state-switch (left card) and press the buttons, they then appear on the problematic card (right card). After a browser refresh they disappear again.
Your 1st post contains a code with ~500 lines. Not sure that someone will try to reproduce it. To demonstrate an issue, people usually post a Minimal Working Example - a short code snippet. Sometimes people even resolve issues themselves while preparing an MWE.
Does not display button card (Chrome).
layout_card > state_switch > stack_in_card > layout_card > custom_button_card...
If I refresh my browser continuously, the button will sometimes appear in the below example. Does not appear however many times I refresh on my full config.
Displays button card every-other browser refresh (Chrome).
state_switch > stack_in_card > layout_card > custom_button_card...
Displays button card as expected (Chrome).
state_switch > layout_card > custom_button_card...
Testing example:
- type: custom:layout-card
layout_type: grid
layout:
margin: 0
grid-template-rows: 1fr
grid-template-columns: 30% 1fr 30%
grid-template-areas: |
". stat2 ."
cards:
- type: custom:state-switch
view_layout:
grid-area: stat2
justify-self: center
align-self: stretch
entity: hash
transition: flip-y
default: p1
states:
p1:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: grid
layout:
margin: 0
padding: 0
card_margin: 0
place-items: center
grid-template-rows: 5.5vh
grid-template-columns: >-
minmax(50px, 1fr) minmax(50px, 2fr)
minmax(20px, 1fr) minmax(20px, 1fr) 4%
grid-column-gap: 1%
grid-template-areas: |
"icon name button1 button1 ."
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: icon
align-self: center
entity: sensor.wiser_hot_water
tap_action:
action: navigate
navigation_path: '#p2'
icon: mdi:water-boiler
icon_color: white
primary: Hot Water
- type: custom:button-card
icon: mdi:power
view_layout:
grid-area: button1
entity: sensor.wiser_hot_water_operation_mode
color_type: card
color: rgba(255,255,255,1)
show_state: false
show_icon: true
show_name: false
size: 40%
styles:
grid:
- grid-template-areas: '"i"'
- grid-template-rows: 1fr
- grid-template-columns: 1fr
type: custom:layout-card
layout_type: grid
cards:
- type: custom:state-switch
entity: hash
default: noworky
states:
noworky:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:button-card
icon: mdi:image-broken
Check your conditions:
entity: hash
default: noworky
states:
noworky:
Works with an input_boolean (not appears fast after a browser's page reload):
type: custom:layout-card
layout_type: grid
cards:
- type: custom:state-switch
entity: input_boolean.test_boolean
default: 'off'
states:
'off':
type: custom:stack-in-card
cards:
- type: entity
entity: sun.sun
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
'on':
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
- type: button
icon: mdi:car
entity: sun.sun
- type: entity
entity: sun.sun
Yes a normal type: button indeed works as expected with either hash or input_boolean but type: custom:button-card does not show with either condition.
Seems to be a conflict between custom:button-card and state-switch
type: custom:layout-card
layout_type: grid
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:state-switch
entity: input_boolean.test_boolean
default: 'off'
states:
'off':
type: custom:stack-in-card
cards:
- type: entity
entity: sun.sun
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
'on':
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
- type: custom:button-card
icon: mdi:car
entity: sun.sun
- type: entity
entity: sun.sun
Seems to be a conflict between
custom:button-cardandstate-switch
You got quite a hamburger. Try to remove the 1st layer (1st layout-card).
An odd but necessary hamburger unfortunately!
However, removing the first custom:layout-card does not work properly either. I would say it shows more frequently than with the layout card, but it's hit or miss between browser refreshes of whether it displays.
- type: entities
entities:
- input_boolean.test_boolean
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:state-switch
entity: input_boolean.test_boolean
default: 'off'
states:
'off':
type: custom:stack-in-card
cards:
- type: entity
entity: sun.sun
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
'on':
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: button
icon: mdi:car
entity: sun.sun
- type: custom:button-card
icon: mdi:car
entity: sun.sun
- type: entity
entity: sun.sun