believe it or not, I asked ChatGPT to correct my code and…
it did ! 
DONT UPDATE TO 2023.4 beta
custom:button-card is borked by the latest:
not exactly sure where in the button-card configs, maybe in the templates, I didnt take the time yet to find out. Since I am fully reliant on button-card for my dashboard, it took me 1 minute to decide to roll back to 2023.3.6
True, i just installed 2023.4 beta on m test. However it seems that only out templates make it corrupted, like
[[[
return states['sensor.next_holiday'].state
]]]
while card itself without above programming works…hm…
but, it seems that decluttering-card is also a problem…
EDIT: it seems that removing “.state” at the end solves button card problems… ?
Decluttering card is still to be solved, though.
for now, manually replacing
querySelector("app-drawer-layout partial-panel-resolver")
with
querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")
in the resource file, and updating accordingly fixed it for me
You mean for decluttering card? Can you tell more? I replaced above in .js file, restarted HA but i still have errors, so i clearly missed a step…
EDIT: it’s not that simple with buton-card either… removing “state” causes card to show correctly, but removes any condition check (it’s always false).
yes there more to it than that. You need to ‘tell’ HA to use the new resource. If you’re in yaml mode that is easy, just change the number in the resources.yaml and reload resources.
# https://github.com/custom-cards/button-card
- url: /local/resources/button-card/button-card.js?v=3.4.2+fix
# - url: /hacsfiles/button-card/button-card.js
type: module
If you are in UI mode, and rely on HACS, you’ve got to trick HACS to use the new edits…
as @kulmegil explained in #beta on Discord:
- find querySelector(“app-drawer-layout partial-panel-resolver”) replace with querySelector(“mwc-drawer partial-panel-resolver”)
querySelector(“app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver”)- if there is a .gz file (HACS thingy) then you need to repack modified .js into it (or delete .gz file completely)
- you need to change the url of modules in Resources. I just appended &patch=2023.03.30 to urls.
(HA is using cache storage api, a bit “stronger” then standard browser cache)- reload page, done
1 Like
Hm…i’m dumb…can’t make it work… i have a second option (HACS):
- i found and replaced that in www/community/button-card/button-card.js
- i deleted .gz file
- here i’m stuck…if i go to resources, “button-card” has url : “/hacsfiles/button-card/button-card.js” . if i change that into : “/hacsfiles/button-card/button-card.js&patch=2023.03.30” HA says button-card not found. I’m not a programmer, but i kinda don’t understand why i should change that entry since i didn’t change button-card.js name… i just altered a piece of program…or ?
I’m not on discord, so i can’t see there…sorry
not sure, I never do that on HACS resources.
you can however add the edited file to another folder I your www, and point to that in the resources dialog?
/config/lovelace/resources and add the new resource
Nope…doesn’t work…same error.: can’t read properties of undefined…(reading “state”)…
that error doesn’t make sense, that means the ‘state machine’ is loaded (because there’s no error on states) but it can’t find that single state, which in general is not possible… Are you sure you have a correct entity_id in that js template?
Sorry for delayed answer…
- that erorr was only a part of it… if i removed “.state” from template definitions it was gone, but then templates stop working…
but, now i restored my test HA with my production image (i never do testing on my live HA!). Then i only replaced above “querySelector” line in existing button-card.js with new content. Lastly i updated to 2023.4b and now it seems that button-card works! So, it was obviously “something” on my test HA… sorry for that, guys!
Only error remains for decluttering card:
(EDIT: was just solved on github…)
* replace with querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver") in particiular
FYI: some formatting was lost when coping text.
The first revison was striked out as it would make it compatible with beta
The second one works with stable as well.
Also some cards had already been updated by their own devs to work.
EDIT: beta4 has changed things again. mwc-drawer is dead, long live ha-drawer 
The code above has been updated to address that.
Hey Kulmegil,
do you by any chance also use Kiosk-mode? we can not apply the same fix there, but I did try to replace app-drawer-layout by mwc-drawer I the resource. No such luck though, seems more is required there.
If you find a way, please chime I there too? Thx!
Nah.
But same quick patch won’t work with all the cards (including Swipe Navigation) as there are more changes in frontend. It doesn’t look like a one liner fix and I’ll leave it to dev - since @NemesisREhe is active it will likely be fixed before stable release.
et voila! BREAKING: HA 2023.4 no longer uses app-drawer-layout · Issue #27 · NemesisRE/kiosk-mode · GitHub
back to topic now.
1 Like
I’m struggeling to place Name / Label over an embedded Card. All my Attempts lead to the embedded Card covering the Text.
How can i control the Layering, and make the Fields Name/Label to be on Top?
type: custom:button-card
show_name: true
show_state: false
show_label: true
size: 30%
label: VAR LABEL
name: VAR NAME
custom_fields:
graph:
card:
type: gauge
entity: input_number.waterfilter_days_backwards
name: Filter
max: 0
min: -30
needle: true
severity:
green: -20
yellow: -25
red: -30
unit: ' -'
card_mod:
style:
ha-gauge:
$: |
svg.text {
display: none;
}
.: |
ha-card div.name {
display: none;
}
styles:
card:
- height: 8rem
- font-size: 14px
- padding-bottom: 5%
- padding-top: 5%
- color: black
- overflow: unset
name:
- margin-top: '-5%'
- overflow: visible
label:
- margin-top: '-20%'
custom_fields:
graph:
- filter: opacity(100%)
- margin-top: '-2%'
- overflow: hidden
grid:
- grid-template-areas: '"graph" "l" "n"'
- grid-template-columns: 100%
- grid-template-rows: min-content min-content min-content
As you can see, additionally i am struggeling to remove the Border of the embedded Card. Because i already used some Card-Mod to remove Text from the Card, the Example Code from the Docs doesn’t work. I will take care of that Problem, after the Placement-Issue with Card-Mod is solved.
Just mentioning, if this is an easy-peasy-Thing, i’d be even happier 
But my Main Problem right now is Controlling the Order / Layering of Elements.
Would be awesome if you know the magic Line i couldn’t find!
Layering in CSS is usually done with the z-index property. I’ve never attempted to use it within a button-card, but you should give it a try.
1 Like
Awesome! That was it. Just the z-filter i didn’t find. Didn’t think of. Works awesome!
Now i can basically nest any card inside Custom Button Card, with the Benefit to set fixed sizes, and “overlay” any other Fields i can think of.
styles:
card:
- height: 7rem
- position: absolute
- top: 0
- left: 0
- font-size: 14px
- padding-bottom: 5%
- padding-top: 5%
- color: black
- overflow: unset
name:
- margin-top: '-25%'
- z-index: 999
label:
- margin-top: '-25%'
- z-index: 998
Thank you so much for the right Keyword !!!
1 Like
I just updated to 2023.4.0 and all of my many Custom Button Cards say
cannot read properties of null (reading 'config')
1 Like