Thanks! Can’t believe I totally missed that basic function.
1 Like
So this is strange. Perhaps I’m missing something, or just doesn’t work like I intend to. I have a simple button card with a grid style that only shows the name. I defined that the name should always start from left with justify-self: start. This all works great and has no issues. However, if I use a template in the name field WITH an icon inside that template, it’s centered. For instance:
Is aligned left (working as intended):
name: 'Flows'
name: '[[[ return `Flows` ]]]'
Is centered (not working as intended):
name: '[[[ return `Flows <ha-icon icon="mdi:rotate-right" style=" color: var(--text-color); height: 7%; width: 7%"></ha-icon> ` ]]]'
So I thought, well maybe because I now define a style in the template, it’s back at default. So then I added justify-self: start to the template style, but same result. I also tried defining the icon style under styles (eventhough icon is not even in the grid), but it’s always centered.
Can someone help me align the name to the left WITH an icon in the template?
You can combine
styles:
name:
- justify-self: start
- text-align: left
or just use
styles:
name:
- text-align: left
1 Like
Thank you, this fixes it! Do you know why suddenly it needs text-align as soon as an icon comes into the template? Just curious as to why it suddenly changes its behaviour.
By using templates the item (= name „Flow“) is packed in a separate box; justify-self refers to this box.
Is it possible to use a template (for styles in this case) that checks current state vs previous state? Like:
if entity.state < previous entity.state return X
Basically I want the color of the name to be green when the current state is higher then previous state and red when it’s lower.
styles:
name:
- color: |
[[[
if (entity.state > YOURVALUE) return 'rgba(0,179,0,0.9)'; return 'rgba(219,23,9,0.9)';
]]]
Sorry, I meant the previous value (which is saved in the history of the entitiy). It’s a sensor entity where the value keeps changing, so I have no way of knowing what the previous state was. So in your example, I want YOURVALUE to be previous value recorded, is this possible?
Certainly not impossible, unfortunately I do not know a solution.
You could look into creating a second sensor that always stores the previous value (using an automation, the trigger for when the main sensor changes value will contain the previous value) or retrieve it with a SQL sensor from the DB.
1 Like
Firstly, thanks so much for such a wonderful component. I’ve been meaning to freshen up my switch cards and this has given me the impetus to do it.
Just wondering how people are handling dimmable lights with this card though? I quite like the standard light button with the integrated slider to dim, but would like to have the control and shadow options this custom button card allows.
Thanks
Hi all,
I have a custom field which returns the current weather conditions:
[[[
…
…
var temp = states['sensor.openweathermap_temperature'].state;
return `<ha-icon
icon='${mdi}'
style='width: 20px; height: 20px; color: var(--text-color-sensor);'>
</ha-icon>
<span
style='color: var(--text-color-sensor); vertical-align: -1px;'>
${w} bei ${temp}°C und einer<br>Niederschlagswahrscheinlichkeit von ${nied}%.
</span>`
]]]
I want the temperature to be displayed with 1 digit instead of 2, but having the same problem as described (and resolved) here.
How can I „translate“ the following solution code for use in my custom field?
{{ '%.2f'|format( states('sensor.outside_table_temperature')|float ) }}
@pedolsky I had the same issue and solved this way:
Math.round(states['sensor.openweathermap_temperature'].state * 10) /10 ;
1 Like
OMG… it’s all about brackets’ position…
Thank you so much!
so, solved this by ‘witchcraft’ see 🌻 Lovelace UI • Minimalist - #93 by clemalex where the French connection has been at it 
thanks, and posting here for reference:
using this button:
- type: custom:button-card
template: button_shortcut_menu
tooltip: Back
icon: mdi:arrow-left
tap_action:
action: toggle
entity: input_boolean.back_button
name: |
[[[
if (entity.state == 'on') {history.back() ;}
]]]
and an automation on the state of the entity boolean:
automation:
- alias: Back button
id: Back button
mode: single
trigger:
platform: state
entity_id: input_boolean.back_button
to: 'on'
action:
service: input_boolean.turn_off
target:
entity_id: input_boolean.back_button
clicking the back button causes the browser to go back in history, way cool indeed. I must confess I dont understand yet how it works, hope Romrider can explain a bit in English in this topic.
Note that I tried it also without automation and the boolean, using only the
name: |
[[[
{history.back() ;}
]]]
but that causes a page to automatically go back upon loading, and renders that useless of course though it is funny to see what’s happening
1 Like
Anyone else noticing that button-cards with input_text entities, inside a popup (browser_mod) are not updated when the status has changed? When used on dashboard (so not in popup) the change is reflected instantly as normal. I use input_text entities where I set the states through automations. Just using the simple template, which shows the state on the label field:
label: |
[[[
return states['input_text.zigbee_pairing_status'].state;
]]]
This works fine on its own, outside of popup. However, inside a popup when the status changes, it doesn’t update it. Closing the popup and then opening it again, shows the new status however. So while viewing the button card inside a popup and changing its state, won’t reflect it.
To be safe, I also added this entity to the main button-card as triggers_update (where the popup is being invoked from using hold_action / fire-dom-event / browser_mod), but that doesn’t help.
Also using this variable doesn’t return the new status in the confirmation, if it has been changed with the popup open. Closing the popup and opening it again, then does return it.
text: |
[[[
return "Naam wijzigen naar " + "'" + states['input_text.zigbee_pairing_naam_wijzigen'].state + "'" + "?";
]]]
So it seams that at least input_text entities don’t get their status change updated while viewing in browser_mod through popup. I have an other popup view with input_booleans. When changing those (from on to off) it does update it. Using the dev tool for a quick test, confirms this.
Not sure if it’s because it’s a template and templates don’t get updated through popups, or if there is a bug with input_text entities.
Hi,
I was wondering if there is a way to space the buttons out. Right now there is just another button in between with 0% transparency however if you look closely you can see a small shhadow of the card.
I now removed the shadow: However a spacing would be more convenient.
You can use color_type: blank-card
Perfect! Thank you!