Hi all,
I`m using a picture elements card to display my TV and some stats on it. Sadly the hight of my card is way to high for its content. Here is a screenshot of it:
Im using a transparen PNG with the size of 200*147px as the background. Both TV pictures have the size of 200x139px. Sadly the card is twice as height as the 147px. Here ist the code of my card:
- type: picture-elements
image: /local/pictures/transparent_small.png?v=3
elements:
- type: image
entity: switch.wohnzimmer_tv
state_image:
"on": /local/pictures/tv_on.png?v=4
"off": /local/pictures/tv_off.png?v=4
style:
top: 30%
left: 50%
width: 43%
tap_action:
action: toggle
- type: state-label
entity: sensor.sp1_02_energy_power
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 1px 35px
- type: icon
icon: mdi:flash-circle
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 8px 13px
- type: state-label
entity: sensor.sp1_02_energy_voltage
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 30px 35px
- type: icon
icon: mdi:current-ac
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 36px 13px
- type: state-label
entity: sensor.sp1_02_energy_current
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 60px 35px
- type: icon
icon: mdi:flash-circle
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 68px 13px
- type: state-label
entity: sensor.sp1_02_energy_today
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 90px 35px
- type: icon
icon: mdi:chart-bar
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 98px 13px
- type: state-label
entity: sensor.medien_kosten_daily
style:
top: 0
left: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 1px 35px
- type: icon
icon: mdi:currency-eur
style:
top: 0
left: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 8px 13px
- type: state-label
entity: sensor.medien_kosten_weekly
style:
top: 0
left: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 30px 35px
- type: icon
icon: mdi:currency-eur
style:
top: 0
left: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 36px 13px
- type: state-label
entity: sensor.medien_kosten_monthly
style:
top: 0
left: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 60px 35px
- type: icon
icon: mdi:currency-eur
style:
top: 0
left: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 68px 13px
- type: state-label
entity: sensor.medien_kosten_yearly
style:
top: 0
left: 0
pointer-events: none
transform: initial
font-size: 12px
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 90px 35px
- type: icon
icon: mdi:currency-eur
style:
top: 0
left: 0
pointer-events: none
transform: scale(0.8)
color: rgba(255,255,255,0.8)
line-height: 32px
padding: 96px 13px
Maybe someone can give me a hint to look at the solution for this problem.