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
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.
Hi @ffeingol, can you please confirm that your code does work well?
I try with light script, but it stay black even after having press the button. Thnaks
Mind sharing your config?
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.
@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
I’m not really sure what I should even be looking for. I’m not really familiar with html/css syntax
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:
Love those icons. Where can I get them?
Thanks
@KTibow Is there anything that I can do to help you troubleshoot? Sorry I was not any help on the HTML/CSS stuff
Sorry, I forgot to do it 
If you go into HA’s developer tools, what is the state when it is off? Also does the image exist?
The two cards in the example use different icons and they are available, but all of the elements fail to show up. This also is only happening on Chrome on Windows and Fully Kiosk on Android. The iOS app and Fully Kiosk on Fire OS are working fine.
When the cards don’t show the state for cover.garage door is “closed” and for binary_sensor.door_basement is “off”
It seems more related to stack-in-card than button-card.
Did you try without it?
Same question, are you running this inside a stack-in-card?
Yeap… i did. Same problem. The strange thing is that it worked perfectly before a couple of updates.
I can confirm that it is related to the stack-in-card. I temporarily switched to a vertical-stack-in-card and problem resolved itself. I then reverted back to the stack-in-card and the problem persisted. I then commented out the following lines, still using the stack-in-card and the problem resolved itself. Commenting out either border_radius or margin or both resolves the problem.
keep:
background: true
# border_radius: true
# margin: true
type: 'custom:stack-in-card'