Cut-off image | Button card

[SanderH030]

Hi,

I created a custom button card with an entity picture in it. I stretched the card (vertical). It seems that there is a cut off, with the original size of the button card. See blow. Does anyone know how to fix this? Thanks!

Code: type: custom:button-card show_entity_picture: true triggers_update: all show_name: false show_state: false show_icon: false tap_action: none style: | ha-card { box-shadow: none; border: solid 0px rgba(100,100,100,0.3); font-family: Arial, Helvetica, sans-serif } styles: entity_picture:

• width: 50%
• padding-buttom: 0%
• line-height: 0px
• right: 30%
• top: '-35%' card:
• background-color: null
• padding-top: 35px
• padding-bottom: 0px
• margin-bottom: 0px
• font-size: 50%%
• line-height: 50px
• border-radius: 20px

[andyblac]

you seem to be shifting the image up - top: '-35%', try making this - top: '0%' and see what happens.

[SanderH030]

you seem to be shifting the image up - top: '-35%', try making this - top: '0%' and see what happens.

Unfortunately this doesn't work. Adjust/change "top" changes the position of the image. This does not enlarge the card totally.

[andyblac]

you seem to be shifting the image up - top: '-35%', try making this - top: '0%' and see what happens.

Unfortunately this doesn't work. Adjust/change "top" changes the position of the image. This does not enlarge the card totally.

what are you trying to do exactly ?, please post the full card yaml.

[andyblac]

also try removing the line-height

[SanderH030]

also try removing the line-height

For my dashboard, I'am trying to create a multiple card with personal images and information about battery, steps and meters. I changed the size of the card (expanded vertically), but it seems that there is a cut-off with the original size of the button card:

I tried to remove the line-height or the "top". I want to place both images exactly in the middle but they are cut off as you can see above.

To make it concrete: I want to place the images both in the middle without them being cut off by the original size of the card. I want to extend the "cut off" size, but don't know how.

In "inspect mode" with Google Chrome, I can see the original size of the card. This is the blue part, the green is the one I extended.

This is the full YAML code of the card:

cards:
  - type: custom:button-card
    show_entity_picture: true
    triggers_update: all
    show_name: false
    show_state: false
    show_icon: false
    tap_action: none
    style: |
      ha-card {
        box-shadow: none;
        border: solid 0px rgba(100,100,100,0.3);
        font-family: Arial, Helvetica, sans-serif
      }
    styles:
      entity_picture:
        - width: 50%
        - padding-buttom: 0%
        - line-height: 0px
        - right: 30%
        - top: '-13%'
      card:
        - background-color: null
        - padding-top: 35px
        - padding-bottom: 0px
        - margin-bottom: 0px
        - font-size: 50%%
        - line-height: 50px
        - border-radius: 20px
      custom_fields:
        battery:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 5%
          - font-size: 150%
          - color: >-
              [[[ if  (states["sensor.iphone_van_battery_level"].state
              < 30) return "#F54436"; if
              (states["sensor.iphone_van_battery_level"].state < 50)
              return "#ffa229"; if
              (states["sensor.iphone_van_battery_level"].state < 101)
              return "#01C852"; else return "#ffc640"]]]
        distance:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 35%
          - font-size: 15px
          - color: rgb(90,90,90)
        meters:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 60%
          - font-size: 92%
          - color: rgb(90,90,90)
    entity_picture: /local/icon1.png
    custom_fields:
      battery: |
        [[[
          var i = states['sensor.iphone_van_battery_level'].attributes.icon;
          var b = states['sensor.iphone_van_battery_level'].state;
          return `<span style='vertical-align: 1px'> </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}%`
        ]]]
      distance: |
        [[[
          var i = states['sensor.iphone_van_steps'].attributes.icon;
          var b = states['sensor.iphone_van_steps'].state;
          return `<span style='vertical-align: 0px'> Stappen </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}`
        ]]]
      meters: |
        [[[
          var i = states['sensor.iphone_van_steps'].attributes.icon;
          var b = states['sensor.iphone_van_distance'].state;
          return `<span style='vertical-align: 0px'> Meters </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}`
        ]]]
  - type: custom:button-card
    show_entity_picture: true
    triggers_update: all
    show_name: false
    show_state: false
    show_icon: false
    tap_action: none
    style: |
      ha-card {
        box-shadow: none;
        border: solid 0px rgba(100,100,100,0.3);
        font-family: Arial, Helvetica, sans-serif
      }
    styles:
      entity_picture:
        - width: 50%
        - padding-buttom: 0%
        - line-height: 0px
        - right: 28%
        - top: 8%
      card:
        - background-color: null
        - padding-top: 0px
        - padding-bottom: 35px
        - margin-bottom: 0px
        - font-size: 50%%
        - line-height: 50px
        - border-radius: 20px
      custom_fields:
        battery:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 5%
          - font-size: 150%
          - color: >-
              [[[ if  (states["sensor.iphone_battery_level"].state <
              30) return "#F54436"; if
              (states["sensor.iphone_battery_level"].state < 50)
              return "#ffa229"; if
              (states["sensor.iphone_battery_level"].state < 101)
              return "#01C852"; else return "#ffc640"]]]
        distance:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 35%
          - font-size: 15px
          - color: rgb(90,90,90)
        meters:
          - background-color: rgb(238,238,228,0.0)
          - align-self: center
          - position: absolute
          - right: 5%
          - top: 60%
          - font-size: 92%
          - color: rgb(90,90,90)
    entity_picture: /local/iconn.png
    custom_fields:
      battery: |
        [[[
          var i = states['sensor.iphone_battery_level'].attributes.icon;
          var b = states['sensor.iphone_battery_level'].state;
          return `<span style='vertical-align: 1px'> </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}%`
        ]]]
      distance: |
        [[[
          var i = states['sensor.iphone_1_steps'].attributes.icon;
          var b = states['sensor.iphone_1_steps'].state;
          return `<span style='vertical-align: 0px'> Stappen </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}`
        ]]]
      meters: |
        [[[
          var i = states['sensor.iphone_1_steps'].attributes.icon;
          var b = states['sensor.iiphone_1_distance'].state;
          return `<span style='vertical-align: 0px'> Meters </span><ha-icon icon='none' style='width: 2px; vertical-align:1px'></ha-icon><b>${b}`
        ]]]```

[andyblac]

please edit the post and use markdown (wrap the code with 3 ` at start and 3 and the end) so it looks like

some code
blah blah
blah blah

as it hard to read as it is. you might need to re-paste it, as it lost all the indentations.

[SanderH030]

please edit the post and use markdown (wrap the code with 3 ` at start and 3 and the end) so it looks like

some code
blah blah
blah blah

as it hard to read as it is.

Sorry, you're right. This makes it a lot easier to read. I'm still a beginner on github :)

[andyblac]

np, ok let me look through, I'm pretty new to HA, but i'll see if I can spot anthing while we wait for Jerome

[andyblac]

ok I see your problem, entity_picture in styles, replace that block with below block

  img_cell:
    - width: 100%
    - height: 100%
    - padding-buttom: 0%
    - line-height: 0px
    - left: '-15%'
    - top: '-7%'
    - place-self: center

[SanderH030]

ok I see your problem, entity_picture in styles, replace that block with below block

  img_cell:
    - width: 100%
    - height: 100%
    - padding-buttom: 0%
    - line-height: 0px
    - left: '-15%'
    - top: '-7%'
    - place-self: center

WOW 😲! That was my first reaction haha. I was working trying to solve this issue for days, now it works. Thank you!!

[andyblac]

if all working, maybe close the issue.

[RomRider]

You're using jinja, this card uses javascript.

[SanderH030]

You're using jinja, this card uses javascript.

Is there a way to make this work with javascript? Earlier a saw that someone mades this happen:

https://pastebin.com/BuKd3pqR

https://www.reddit.com/r/homeassistant/comments/zsjmn5/version_10_is_ready_and_is_wifeapproved/

I think it can be done by creating states in the config, then bring them in?

[SanderH030]

You're using jinja, this card uses javascript.

You're using jinja, this card uses javascript.

Is there a way to make this work with javascript? Earlier a saw that someone mades this happen:

https://pastebin.com/BuKd3pqR

https://www.reddit.com/r/homeassistant/comments/zsjmn5/version_10_is_ready_and_is_wifeapproved/

I think it can be done by creating states in the config, then bring them in?

I fixed it! Thanks, now the code is in JavaScript and it works :)!