No, that is not possible with absolutely positioned elements because they are removed from the flow.
Your best bet is to set the size of the absolutely positioned element in % (it will be then based on the parent’s size)
Well, the parents size will be zero, as the parent is empty. But I have another idea… it might work with a grid? I’ll give that a try…
And that does indeed work! Quiz question: which one of the two cards is the custom:vacuum-card and which one is the custom:button-card (containing a custom:vacuum-card)?
All I had to do was remove padding and inherit font-size:
type: 'custom:button-card'
styles:
card:
- padding: 0px
- font-size: inherit
grid:
- grid-template-areas: '"vacuum"'
custom_fields:
vacuum:
card:
type: 'custom:vacuum-card'
entity: vacuum.xiaomi_vacuum_cleaner
image: default
show_name: false
compact_view: false
show_status: true
show_toolbar: false
map: camera.xiaomi
style: |
ha-card {
--primary-color: ;
}
That now will allow me to place even more custom_fields on top of that, something that the original vacuum-card would not have allowed. What a great hacking tool, this opens quite some possibilities to mash-up cards.
Edit: Here is my pimped vacuum-card, which is now a button-card. It now has a self-designed start button that changes state and calls a custom script to allow cleaning of individual rooms plus a wrench icon that changes state to orange and red depending on the hours left until cleaning is needed. Both are custom_fields with embedded button-cards.
It’s incredible, how powerful button-card really is. So much to discover! Thank you, @RomRider.
4 Likes
Hello,
I am trying to build a custom button card for shutters like this:
I would like to have the bottom buttons to react to the tap_action calling the service to open, stop or close the blind. Problem is that I haven’t been successful in specifying the action within the custom_fields.
Here is the code I used:
type: 'custom:button-card'
name: Sala
show_name: false
entity: cover.hall_window
aspect_ratio: 1/1
color_type: icon
color: var(--disabled-text-color)
icon: 'mdi:window-shutter'
size: 50%
styles:
card:
- border-radius: 3%
- border: 'solid 2px rgba(255,255,255,.2)'
grid:
- grid-template-areas: '"i i pos" "s s s" "up stop dn"'
- grid-template-columns: 1fr 1fr ifr
- grid-template-rows: 1fr min-content min-content
custom_fields:
pos:
- align-self: left
- justify-self: start
- font-size: 14px
up:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
stop:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
dn:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
pos: |
[[[
return `<span>${states['cover.hall_window'].attributes.current_position}%</span>`
]]]
up: |
[[[
return `<ha-icon
icon="mdi:arrow-up-bold"
style="width: 40px; height: 40px; color: var(--disabled-text-color);">
</ha-icon>`
]]]
stop: |
[[[
return `<ha-icon
icon="mdi:stop"
style="width: 40px; height: 40px; color: var(--disabled-text-color);">
</ha-icon>`
]]]
dn: |
[[[
return `<ha-icon
icon="mdi:arrow-down-bold"
style="width: 40px; height: 40px; color: var(--disabled-text-color);">
</ha-icon>`
]]]
show_state: true
state:
- value: open
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: opening
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: closing
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
label: |
[[[
var pos = states['cover.hall_window'].attributes.current_position;
var st = states['cover.hall_window'].state;
return st + ': ' + (pos ? pos : '0') + '%';
]]]
show_label: false
1 Like
You could make the items in the custom_fields 3 individual new button-cards, e.g.:
custom_fields:
up:
card:
type: 'custom:button-card'
icon: "mdi:arrow-up-bold"
tap_action:
action: call-service
service: whatever.service
Thanks @kongo09 and @RomRider!
It’s also what I was attempting to do … but in the wrong custom_fields section…
Now I have the following code running:
type: 'custom:button-card'
name: Sala
show_name: false
show_state: true
show_icon: true
entity: cover.hall_window
aspect_ratio: 1/1
color_type: icon
color: var(--disabled-text-color)
icon: 'mdi:window-shutter'
size: 60%
styles:
card:
- border-radius: 3%
- border: 'solid 2px rgba(255,255,255,.2)'
grid:
- grid-template-areas: '"i pos pos" "s s s" "up stop dn"'
- grid-template-columns: 1fr 1fr ifr
- grid-template-rows: 1fr min-content min-content
custom_fields:
pos:
- align-self: left
- justify-self: start
- font-size: 14px
up:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
stop:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
dn:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
custom_fields:
pos: |
[[[
return `<span>${states['cover.hall_window'].attributes.current_position}%</span>`
]]]
up:
card:
type: 'custom:button-card'
icon: 'mdi:arrow-up-bold'
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.hall_window
stop:
card:
type: 'custom:button-card'
icon: 'mdi:stop'
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.hall_window
dn:
card:
type: 'custom:button-card'
icon: 'mdi:arrow-down-bold'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.hall_window
state:
- value: open
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: opening
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: closing
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
However still a problem to solve: the 3 icons (up, stop and down) aren’t centered and filling 1/3 of the whole space. Any hint for this? I played with size, width and height but with no luck.
Thanks
You have a typo in grid-template-columns (ifr).
Good catch! Thanks
Can you post the right code who is working ?
Thanks
This is just another dashboard with the same icon defined. You can create as many dashboards as you want in the configuration of home assistant.
thanks for your quick reply, i’m not sure i can because i use different views and i’m in yaml mode
You can add multiple dashboard in yaml mode and you can even mix yaml mode and GUI driven dashboards.
I see you are quite new, here the documentation: https://www.home-assistant.io/lovelace/dashboards-and-views/#adding-more-dashboards-with-yaml
yes you’re right i’m new 
thanks it’s exactly what i need !
Hi again, any idea how i can i have the roundes shapes ? i guess it’s in the template button cards or direclty in the card but i don’t know what put in the code
Other thing, how can i have the numbers for the brightness, see my capture below :
thanks
Here it is:
type: 'custom:button-card'
name: Sala
show_name: false
show_state: true
show_icon: true
entity: cover.hall_window
aspect_ratio: 1/1
color_type: icon
color: var(--disabled-text-color)
icon: 'mdi:window-shutter'
size: 50%
styles:
card:
- border-radius: 3%
- border: 'solid 2px rgba(255,255,255,.2)'
grid:
- grid-template-areas: '"i i pos" "s s s" "up stop dn"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr min-content min-content
state:
- font-size: 12px
- align-self: center
- justify-self: center
custom_fields:
pos:
- align-self: left
- justify-self: start
- font-size: 14px
up:
- padding-bottom: 2px
- align-self: middle
- justify-self: middle
stop:
- padding-bottom: 2px
- align-self: middle
- justify-self: middle
dn:
- padding-bottom: 2px
- align-self: middle
- justify-self: middle
custom_fields:
pos: |
[[[
return `<span>${states['cover.hall_window'].attributes.current_position}%</span>`
]]]
up:
card:
type: 'custom:button-card'
icon: 'mdi:arrow-up-bold'
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.hall_window
size: 35px
stop:
card:
type: 'custom:button-card'
icon: 'mdi:stop'
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.hall_window
size: 35px
dn:
card:
type: 'custom:button-card'
icon: 'mdi:arrow-down-bold'
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.hall_window
size: 35px
state:
- value: open
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: opening
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
- value: closing
color: 'rgb(255, 255, 0)'
icon: 'mdi:window-shutter-alert'
I still don’t know whether to use this card or use the simple one without the buttons and rely on the popup window to move it up and down…
Great Thanks a lot !
Can someone help me diagnose a newbie error? I’m trying to use a radio station icon to start a stream on a specific media player when I press the button. I thought I entered everything correctly, but I keep receiving this error when I click the button:
Logger: frontend.js.latest.202012291
Source: components/system_log/__init__.py:193
First occurred: 3:24:27 PM (3 occurrences)
Last logged: 3:42:36 PM
http://[ip]:8123/hacsfiles/button-card/button-card.js:1:30303 TypeError: t.states[e] is undefined
Here’s my code:
type: 'custom:button-card'
size: 150px
show_entity_picture: true
entity_picture: >-
https://www.omahaconnectride.com/wp-content/uploads/2019/08/KGBI-LOGO-REVERSE-RGB.jpg
action: service
service:
domain: media_player
action: play_media
data:
entity_id: media_player.office_speaker
media_content_id: 'https://nwmedia-kgbi.streamguys1.com/kgbi-mp3'
media_content_type: music
I don’t know where you found this piece of code but it’s completely wrong… Please read the documentation on github.
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.office_speaker
media_content_id: 'https://nwmedia-kgbi.streamguys1.com/kgbi-mp3'
media_content_type: music
Can someone see why this isnt evaluating properly? Was working fine before HA update. Basically bbag_days is currently 4 but the IF statement is returning true despite condition being 7 or more. This button should show recycling in 4 days.
s2: |
[[[
var bbag_state = (states['sensor.black_bag'].state);
var bbag_days = (states['sensor.black_bag'].attributes.days);
var recycle_sensor = (states['sensor.recycling'].state);
var recycle_days = (states['sensor.recycling'].attributes.days);
if (bbag_days => "7") return "Black Bag in " + bbag_days + " Days";
else {
if (recycle_sensor == "0") return "Recycling Today";
else if (recycle_sensor == "1") return "Recycling Tomorrow";
else return "Recycling in " + recycle_days + " Days";
}
]]]
1 Like