My picture elements card ist to high

Configuration
1

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:

grafik

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.

2

This is a bit of a guess, but if your column width is wider than your 200px transparent image HA may be scaling it to fill the width. If the width is 400px it’ll be double the height you want.

3

Thanks for your suggestion, eggman. According to this I have created an new, empty lovelace tab and only inserted the code for the card. So there is no other card which are making the column wider than the picture element card. Sadly the behaviour is still the same, I have this big empty space under the picture of the TV.

4

I’m fairly sure it doesn’t work that way. Lovelace looks at how many columns it has to create and at how much space it has, if there’s only one column it’ll use about 25% - 35% and scale your cards to fit.

I’ve just tried a view with a single column and a single picture elements card. I have two images one is 750 x 180px, the other is 375 x 90px both create identical cards.

750px x 180px

image
image3840×516 24.5 KB

375px x 90px

image
image3840×604 71.9 KB

Pretty sure you need to make your background image either wider or shorter to get the correct aspect ratio.

1 Like
5

Thank you very much! You were absolutly right, the size of the card is based on the size oft the background image! Now my card looks good:

grafik

For this card I have resized the transpartent background to 750 x 270 px. It even looks good on mobile!

1 Like