I think it’s lay-out card. I use lay-out card on my mobile view in vertical mode with a max width in order to have paddings to the sides. I used to have set that to 98%, however one of the latest updates (I think the one that came with HA 112) was suddenly wider at 98%. So I changed everything to 96%, to have the same results as before.
Perhaps there have been more changes with layout card, that causes your issue.
I gotta ask though: why do you use lay-out card to achieve that view? Wouldn’t is be easier to use the built in horizontal-stack and vertical-stack (which is what I use). Or maybe I’m just not understanding your code.
thmry
August 16, 2020, 10:08am
4358
Thanks for mentioning that, going to look into what exactly changed in layout-card around that period. @thomasloven would you maybe be able to point me to the issue immediately without me going into all of the changes?
About using layout-card instead of the core components… I’m using layout-card on other views for more complexity. It kind of became my go to layout component and haven’t been using the core ones at all except for the most outer container. I guess it just became a habit. I chose to show this page here because it is fairly simplistic to show the issue and cutting away all of the complexity of all the other views I have.
I´m trying to use your code, but i got this message:
KTibow
August 16, 2020, 8:33pm
4360
That’s a problem of decluttering card, not button card.
This is my decluttering …
room:
card:
custom_fields:
icon1: |
[[[
if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon2: |
[[[
if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon3: |
[[[
if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon4: |
[[[
if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon5: |
[[[
if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon6: |
[[[
if (states['[[temp_ent]]'].state == "heat")
return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[temp_ent]]'].state == "cool")
return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
stat1: |
[[[
return `<ha-icon
icon="mdi:[[stat1_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
]]]
stat2: |
[[[
return `<ha-icon
icon="mdi:[[stat2_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
]]]
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_label: false
show_state: false
size: 70%
state:
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: crimson
value: heat
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: lightblue
value: cool
styles:
card:
- font-size: 12px
- padding: 5px 3px 5px 3px
custom_fields:
icon1:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return null;
]]]
icon2:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";
else return null;
]]]
icon3:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
else return null;
]]]
icon4:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";
else return null;
]]]
icon5:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";
else return null;
]]]
icon6:
- padding: 0px 0px 0px 0px
stat1:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat1_ent]]"].state < 20) return "lightblue";
if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine";
else return "tomato";
]]]
stat2:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat2_ent]]"].state < 30) return "lightblue";
if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine";
else return "tomato";
]]]
grid:
- grid-template-areas: >-
". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
- grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
- grid-template-rows: 2fr 1fr 1fr 3fr
- padding: 0px 0px 0px 0px
icon:
- place-self: center
- padding: 0px 0px 3px 0px
name:
- justify-self: start
- font-size: 16px
- padding: 0px 0px 0px 3px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- cards:
- cards:
- cards:
- color_type: '[[pu_light1_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light1_ent]]'
hold_action:
action: more-info
name: '[[pu_light1_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
- color_type: '[[pu_light2_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light2_ent]]'
hold_action:
action: more-info
name: '[[pu_light2_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
- cards:
- color_type: '[[icon1_colortype]]'
entity: '[[icon1_ent]]'
hold_action:
action: '[[icon1_holdaction]]'
icon: 'mdi:[[icon1_icon2]]'
name: '[[icon1_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon1_icon1]]'
styles:
icon:
- color: '[[icon1_color1]]'
- animation: '[[icon1_animate]]'
value: '[[icon1_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon1_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon2_colortype]]'
entity: '[[icon2_ent]]'
hold_action:
action: '[[icon2_holdaction]]'
icon: 'mdi:[[icon2_icon2]]'
name: '[[icon2_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon2_icon1]]'
styles:
icon:
- color: '[[icon2_color1]]'
- animation: '[[icon2_animate]]'
value: '[[icon2_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon2_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon3_colortype]]'
entity: '[[icon3_ent]]'
hold_action:
action: '[[icon3_holdaction]]'
icon: 'mdi:[[icon3_icon2]]'
name: '[[icon3_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon3_icon1]]'
styles:
icon:
- color: '[[icon3_color1]]'
- animation: '[[icon3_animate]]'
value: '[[icon3_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon3_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon4_colortype]]'
entity: '[[icon4_ent]]'
hold_action:
action: '[[icon4_holdaction]]'
icon: 'mdi:[[icon4_icon2]]'
name: '[[icon4_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon4_icon1]]'
styles:
icon:
- color: '[[icon4_color1]]'
- animation: '[[icon4_animate]]'
value: '[[icon4_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon4_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon5_colortype]]'
entity: '[[icon5_ent]]'
hold_action:
action: '[[icon5_holdaction]]'
icon: 'mdi:[[icon5_icon2]]'
name: '[[icon5_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon5_icon1]]'
styles:
icon:
- color: '[[icon5_color1]]'
- animation: '[[icon5_animate]]'
value: '[[icon5_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon5_tapaction]]'
type: 'custom:button-card'
type: horizontal-stack
- color_type: '[[pu_therm_colortype]]'
custom_fields:
cardy:
card:
entity: '[[pu_climate_ent]]'
hide:
state: true
icon:
cool: 'mdi:snowflake'
heating: 'mdi:fire'
'off': 'mdi:stop-circle-outline'
modes:
cool: null
heating: null
'off': null
name: Thermostat
sensors:
- attribute: hvac_action
entity: '[[pu_climate_ent]]'
name: Currently
- entity: '[[pu_climate_hum]]'
name: Humidity
type: 'custom:simple-thermostat'
entity: light.curtis
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"cardy"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: 'custom:button-card'
- cards:
- align_header: left
align_icon: left
animate: true
entities:
- color: '#f2ab48'
entity: '[[pu_climate_temp]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Temperature - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
- align_header: left
align_icon: left
animate: true
entities:
- color: '#57a5f2'
entity: '[[pu_climate_hum]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Humidity - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
deviceID:
- this
large: false
title: '[[pu_title]]'
triggers_update:
- '[[icon1_ent]]'
- '[[icon2_ent]]'
- '[[icon3_ent]]'
- '[[icon4_ent]]'
- '[[icon5_ent]]'
- '[[icon6_ent]]'
- '[[stat1_ent]]'
- '[[stat2_ent]]'
- '[[pu_light1_ent]]'
- '[[pu_light2_ent]]'
type: 'custom:button-card'
thmry
August 17, 2020, 8:26am
4362
Just as a follow-up. As this doesn’t seem to be an issue in Button Card, but with Layout Card instead, I posted my issue and new findings in that thread here (just informing here in case someone has the same issue).
1 Like
VMCosco
August 17, 2020, 2:21pm
4363
Having an issue that seems to have started after updating to 0.114 but hard to say exactly. I am using several different configurations of button cards. The have two stacks that use the homekit style configuration. These cards are not showing when inactive in Chrome on Windows or Fully Kiosk on Android. They are still showing as expected on iOS Companion app and Fully Kiosk for Fire Tablets.
When the buttons are inactive the stack looks like this:
When a button is activated, the stack shows as normal:
Once the sensor or switch is off, the card looks normal until the next refresh when it goes blank again:
Also, when the page is rendering after a refresh the cards show as normal but then go blank when the rendering finishes.
I am using a template, but here is the code:
# Homekit type buttons
switch_homekit:
color: var(--google-yellow)
show_state: true
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--primary-color)
- height: 100px
- width: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- margin-top: '-5%'
- padding-left: 10px
img_cell:
- justify-content: start
- text-align: start
name:
- font-size: 14px
- font-weight: bold
- justify-self: start
- padding-left: 10px
state:
- font-size: 14px
- justify-self: start
- padding-left: 10px
- text-transform: lowercase
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'closed'
styles:
card:
- filter: opacity(50%)
icon:
- color: "#636466"
- filter: grayscale(100%)
- value: 'unavailable'
styles:
card:
- filter: opacity(50%)
icon:
- color: 'rgb(194, 27, 44)'
cards:
- name: Doors
template: title_centered
type: 'custom:button-card'
- cards:
- color_type: blank-card
styles:
card:
- width:
type: 'custom:button-card'
- entity: binary_sensor.door_basement
name: Basement
state:
- color: 'rgb(194, 27, 44)'
operator: template
styles:
card:
- border-color: 'rgb(194, 27, 44)'
value: >
[[[ return states['binary_sensor.warning_door_basement'].state === 'on' ]]]
template: switch_homekit
tap_action:
action: more-info
type: 'custom:button-card'
- entity: cover.garage_door
name: Garage
state:
- color: 'rgb(194, 27, 44)'
icon: 'mdi:garage-alert'
operator: template
styles:
card:
- border-color: 'rgb(194, 27, 44)'
value: >
[[[ return states['input_boolean.garage_warning'].state === 'on' ]]]
- color: var(--google-yellow)
value: open
template: switch_homekit
tap_action:
action: toggle
type: 'custom:button-card'
- color_type: blank-card
styles:
card:
- width:
type: 'custom:button-card'
type: horizontal-stack
keep:
background: true
border_radius: true
margin: true
type: 'custom:stack-in-card'
I’m also having the same problem. But instead of nothing, the entity icon is showing when inactive.
deliwyn
August 17, 2020, 8:21pm
4365
Hi @ffeingol , can you please confirm that your code does work well?
KTibow
August 17, 2020, 8:22pm
4366
Mind sharing your config?
KTibow
August 17, 2020, 8:23pm
4367
What happens if you open devtools, choose the pointer in the upper left, hover over where the buttons should be, and click? See any odd HTML/CSS? Screenshots welcome.
ffeingol
August 17, 2020, 8:37pm
4368
@deliwyn It stopped working again after the latest updates. I have to dig further, but I don’t think my script stays ‘on’ once it’s triggered, so the button changes color, then goes back. I need to dig into it more, but it’s not on the top of my list right now.
1 Like
VMCosco
August 17, 2020, 8:44pm
4369
I’m not really sure what I should even be looking for. I’m not really familiar with html/css syntax
KTibow
August 17, 2020, 8:45pm
4370
@gabrielmiranda mind sharing your config?
What do you need?
Here is the button code:
- entity: binary_sensor.desktop_gabriel_power_status
haptic: selection
name: Computador
show_entity_picture: true
size: 60%
state:
- entity_picture: /local/img/icones/pc-on.png
value: 'on'
- entity_picture: /local/img/icones/pc-off.png
value: 'off'
styles:
card:
- height: 7em
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards: null
type: vertical-stack
type: 'custom:button-card'
The binary_sensor.desktop_gabriel_power_status is an MQTT sensor created by MQTT Discovery
I was here thinking and I maybe shouldn’t use OFF but something like disabled.
Off image:
On image:
ajoyce
August 18, 2020, 10:03am
4372
Love those icons. Where can I get them?
Thanks
thmry
August 18, 2020, 3:22pm
4376
Those are Font Awesome icons (the light variant).
VMCosco
August 18, 2020, 6:51pm
4377
@KTibow Is there anything that I can do to help you troubleshoot? Sorry I was not any help on the HTML/CSS stuff
