It only happens for me in the companion app - it doesn’t happen in chrome. It’s not a button card issue…
1 Like
yes it is, the example does not work for me
I am using this integration but I am unable to get a picture to be displayed on the button
color: auto
color_type: card
entity: switch.meross_19012
label: Xbox
show_icon: false
show_label: true
show_entity_picture: true
entity_picture: /local/xbox.jpg
styles:
card:
- height: 50px
label:
- font-size: 14px
name:
- font-size: 14px
type: 'custom:button-card'
Can someone see anything wrong there on how that is called?
Anyone got a clue why it has the space when i use condition?
Hi guys,
The card is really cool. Two questions:
The name starts everything with a lower case. Is there a reason for that?
Is it possible to switch multiple entities? All lights for instance?
Thanks a lot
To solve you problem you have to look in your template and see what custom areas you have in it and move the information to the area i told you i nast reply. gl
Ive allso Noticed that the more Buttons i add to a horizontal row with a condition to be hidden the higher the space becomes.
I’m new to this, how would I make the buttons centered ? The buttons always start on left and I end up with a gap on right side.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.lab_main
name: Main
show_state: true
color: auto
size: 70%
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 115px
- height: 105px
- --paper-card-background-color: rgb(255, 251, 239)
name:
- justify-self: center
- padding-left: 2px
- font-weight: bold
- font-family: Helvetica
- font-size: 16px
state:
- font-size: 10px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 2px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
state:
- value: 'off'
styles:
state:
- filter: opacity(50%)
name:
- filter: opacity(90%)
Hi all, I’m banging my head on label templates, maybe someone can help me.
How can I translate this jinja code to javascript?
{{ states.persistent_notification | count }}
I’ve tried with states['persistent_notification'].lenght but it doesn’t work
thanks
easiest you can do if you have that template sensor, simply use that sensor as entity for the button 
yep, I know, I’ve did the same for lights, switches etc…
I was just hoping there was a better way.
thanks anyway
That should do the trick
Object.keys(states).filter((name) => /^persistent_notification\./.test(name)).length;
1 Like
I confirm your conclusion.
Only way I solved this for now is with a script and a delay.
But is this really a big in the app?
No one else has this issue?
Yes, it works perfectly. Thank you so much.
May I ask you to explain the code so that we can learn what’s going on and how to achieve such results?
states is an object, each key is an entity (including persistent_notification.notification_id).
Object.keys(states) returns an array of all the keys of the states object. Then we filter it.
filter takes a function as an argument: (name) => /^persistent_notification\./.test(name).
This says: each key is a parameter to the function, and the parameter is name. Then we test the argument name and check if it matches against the regex /^persistent_notification\./. If it matches, then filter will add the key to its result array.
filter returns an array so you can then use length on it.
Hope it helps. 
2 Likes
has this been resolved somehere, or maybe cleared up?
I’m using a modern browser on an up to date system, so should not need the Cors settings (tried it anyhow, didn’t make a difference).
When casting from Chrome to my Google Hub, I see the instance, but all button cards are red, with error 'cannot read property 'config' of null' (see here for more issues…
Using the NabuCasa connection doesn’t make a difference either, so I m stuck for now really, hope this thread might have some pointers how to solve the red button cards.
thanks for having a look.
Maybe a stupid question, but is this button card only configurable via yaml? I thought it would appear amongst other cards to choose form when I select configure UI and then choose “Add card”?
Gotta use yaml.
Oh okay, thanks for info!
The option to select from the UI is “Manual Card”. That’s the selection for any custom card, and then you enter your yaml
1 Like