Struggling with creating a header card that’s stuck to the top, with a button at the end of it that will open a menu. The upper card is my old header (bubble card) which shows how it should look, the button under it is my new header (custom button card), but i haven’t found out how to add the menu button at the end or make it stuck at the top of my view.
Now i’m struggling with the text moving around on the card. How do i make the name and state always begin at a specific place on the card? If i copy the card to use with another entity, the name will move further to the right/left depending on how long the text is. The two cards on the bottom is custom buttons, the other ones are bubble buttons which is how it’s supposed to look.
The state of the battery should also always start at the percent.
I have the same issue with the stack-in-card. I created many custom cards with the stack in card, but the loading is like loading a website on an old land line.m (back to the 90’s).
I hope the transition to custom button card ,will solve this.
Hope I’m in the right thread here!
Please help!
How can I place a dividing line in the lower area and a text in the middle underneath?
should look like this!
Hi all, does anyblody know whether it is possible to get system attributes from the custom button card? I’m trying to get the following attribute from an entity:
{{ device_attr(‘cover.roller_room’, ‘configuration_url’) }}
Is there an equivalent in java of the above jinja2 code?
I tried:
entity.attributes.system_mode == ‘configuration_url’
But it doesn’t work
Many thanks
Hey all,
I have been racking my brain for a couple of hours / days over this;
This is what it currently looks like on PC, I would like the buttons to be “bigger” on PC as there is blank space at the bottom of the button that the text can take up (and has when I manually set it to a larger size).
tl;dr
Basically, I want to know - How do I change the height & width of the buttons depending on the size of the viewport/screen.
I know that Button Cards has extra_styles and I can target the @ media css query but I am not amazing at CSS.
edit: I should add that setting label: does show the correct window size, but I can’t get the comparison to work. I’ve tried with and without Number().
For anyone that is interested in the future, after bunch of testing, the problem appears to related to the return 'false' which seems to have a special meaning in javascript.
I’m not sure how to return anything in javascript (at least in button card, anyway) without it being in quotes based on all the examples provided in the repo.
Either way, I read that return false means ‘do not return anything’.
No, not confusing with YAML - I definitely read it whilst researching Javascript on stackoverflow or w3schools, but cannot find it now - maybe I misinterpreted the text. Thanks for correcting me.
thanks!
Well, that’s embarrassing, but I can see how I missed it. It doesn’t actually state that it doesn’t support templating, but all the options that do support tempting, explicitly state it. Thanks for pointing that out!
I’m a years-long user of button card but have not kept up with things in the past several years (kids!) and a recent HA update broke several cards that were working fine for years… they broke sometime between 2024.06 and 2024.10. I’m not up to speed on HA’s breaking changes.
I make heavy use of templating + decluttering cards and I’ve isolated the problem to the section below (remove it and the card functions). Have there been any breaking changes to HA over the past few months that would required a re-write here?
Lovelace Error:
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'if (states['sensor.chi'].state == "[[state2-2]]") return `<ha-icon icon="mdi:signal-dis...'
I continue to look on my own but I’ve come up blank so far and don’t have as much time to dig (again, kids!) so I’ve come to the brain trust for ideas.
