custom-cards
Bug when hold action is actioned
Checklist
- [*] I updated the card to the latest version available
- [*] I cleared the cache of my browser
Describe the bug after you have long tapped on a button the icon and labels moves position. This only happens in Saferi web browser, it does not happen if I use Chrome on macOS.
Version of the card Version: 4.1.1
To Reproduce This is the configuration I used:
styles:
label:
- font-weight: "bold"
- font-size: "90%"
- border-radius: "50%"
- position: "absolute"
- right: "6%"
- top: "0%"
- height: "30%"
- width: "30%"
- margin-top: "7%"
- margin-bottomt: "5px"
- line-height: "24px"
- color: "rgba(var(--color-theme),0.2)"
- background-color: "rgba(var(--color-theme),0)"
icon:
- color: "rgba(var(--color-theme),0.2)"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "6px"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- width: "100%"
- height: "100%"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "60%"
- top: "54%"
- transform: "translate(-50%,-50%)"
- margin-top: "15%"
- margin-left: "-28%"
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
Screenshots
before tap action in performed.
after long tap, and action has run.
after closing the more info popup
if you refresh the page the bottum returns to normal.
Expected behavior the button icon etc shoudl not move position.
Desktop (please complete the following information):
- Browser: [Safari]
- Version: [16.6]
Additional context if you need more info please just ask. I have attached the full yaml file
custom_card_andyblac_status_icon_only.yaml.zip
yaml to use template
- type: "custom:button-card"
name: Doors
entity: sensor.number_of_doors_open
template:
- custom_card_andyblac_status_icon_only
variables:
ulm_card_status_color: blue
ulm_card_status_badge_bg: true
have to ask again, could you please provide a minimal config (without having to dl external files) so we can get an idea of what causes this. Just delete any line you have, and still reproduce the issue.
also, and this might be me, I cant spot the issue in your screenshots. please tighten that to only showing the issue?
also, tap action, long tap action, hold action.... which is it...? Please be concise.
before hold_action (more info) is performed, how it should look.
after closing the more info popup
as you can see the button contents has shifted upwards, it should not have moved.
I will try to reduce code to the minimum till bug remains and report back.
still happens with this code, it also happens with tap_action when set to more-info
- type: "custom:button-card"
name: Doors
entity: sensor.number_of_doors_open
color: "var(--google-grey-500)"
size: "45%"
aspect_ratio: "1/1"
show_icon: true
show_label: false
show_name: false
tap_action:
action: "more-info"
entity: "[[[ return entity.entity_id; ]]]"
hold_action:
action: "more-info"
entity: "[[[ return entity.entity_id; ]]]"
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- width: "100%"
- height: "100%"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "60%"
- top: "54%"
- transform: "translate(-50%,-50%)"
- margin-top: "15%"
- margin-left: "-28%"
card:
- border-radius: "15px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
managed to reduce it down even further.
- type: "custom:button-card"
entity: sensor.number_of_doors_open
size: "45%"
aspect_ratio: "1/1"
show_icon: true
show_label: false
show_name: false
tap_action:
action: "more-info"
entity: "[[[ return entity.entity_id; ]]]"
hold_action:
action: "more-info"
entity: "[[[ return entity.entity_id; ]]]"
styles:
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- position: "absolute"
- left: "-20%"
- top: "20%"
card:
- border-radius: "15px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
still happens.
this can probably be further reduced, leaving out all non 'size' elements, like color etc.
find out when this doe Not happen anymore... ;-) which is what we are looking for.
also, does this happen on all buttons you use, or only this one?
got it down to
- type: "custom:button-card"
entity: sensor.number_of_doors_open
# aspect_ratio: "1/1"
show_icon: true
show_label: false
show_name: false
tap_action:
action: "more-info"
entity: "[[[ return entity.entity_id; ]]]"
styles:
img_cell:
- left: "-20%"
- top: "20%"
still happends, although a smaller amount as card is no longer square. (1/1). It happens even if I create a new bashboard, with only this code in it.
also, does this happen on all buttons you use, or only this one?
just this type where the imagecell, icon etc are shifted down and left, and when using the more-info popup, if i use navigation for example the bug does not occurre
yes, I can reproduce, but its not 100% hit. every now and then, when returning from the more info, and the focus has returned to the card, it slides up. even with this:
- type: custom:button-card
entity: input_boolean.test
aspect_ratio: 1
show_icon: true
# show_label: false
# show_name: false
tap_action:
action: more-info
styles:
img_cell:
# - left: '-20%'
- top: '20%'
it also moves up the name.
this:
styles:
img_cell:
# - left: '-20%'
- top: 20%
- justify-content: start
seems better, please give it a try?
just the same here, moves up. i've tried 'start'. 'end' etc, none made a differance, same with position.
it does here, and yes all the contents of the button moves up, not just the img_cell. that why originally i gave you the full card.
small movement but it does move.
ok then we have the bare minimum, and have to wait for Jerome to comment ;-)