button-card: v.4.0.1 Icon Size not rendered correctly

Checklist

[ x ] I updated the card to the latest version available
[ x ] I cleared the cache of my browser

Describe the bug Icon Size 100% is no longer 100% with Version 4.x

In this particular Case, drawn Icon Size doesn’t change between 20-100%. Icon gets smaller when going lower that 20%, but not bigger. Same behavior goes for using ‘px’. Icon doesn’t get bigger as in Screenshot below, though there is Space available.

Version of the card 4.0.1

To Reproduce This is the configuration I used:

type: custom:button-card
show_name: true
show_state: true
size: 100%
entity: sensor.weather_home_temperatureactservice
name: |
  [[[ return states['sensor.aqara_temperatur_inside_mean'].state + " °C"]]] 
styles:
  card:
    - height: 100%
    - font-size: 14px
    - padding-bottom: 2%
    - padding-top: 5%
  state:
    - color: >-
        [[[ if ( (states['sensor.weather_home_temperatureactservice'].state) -
        (states['sensor.aqara_temperatur_inside_mean'].state) > 0 ) return
        'rgb(153,0,26)'; else return 'gray' ]]]
    - font-size: 12px
icon: mdi:white-balance-sunny
color_type: icon
color: rgb(68,115,158)
tap_action:
  action: navigate
  navigation_path: /user-home/weather/

Screenshots

Expected behavior When Size: 100%, Icon should fill the whole available Size.

Desktop (please complete the following information):

Firefox 115.0
Chrome 115.0

Smartphone (please complete the following information):

Device: Google Pixel 6a
OS: Android 13
Browser: Compainion App
Version: 2023.7.5-full

About this issue

Original URL
State: closed
Created a year ago
Comments: 24 (5 by maintainers)

Commits related to this issue

fix: remove margin-top on name/label/state introduced with 4.0.0 which broke many cards Fixes #742, Fixes #744 — committed to custom-cards/button-card by RomRider a year ago
chore(release): 4.1.0-dev.2 [skip ci] ## [4.1.0-dev.2](https://github.com/custom-cards/button-card/compare/v4.1.0-dev.1...v4.1.0-dev.2) (2023-08-01) ### Bug Fixes * remove margin-top on name/label/... — committed to custom-cards/button-card by semantic-release-bot a year ago
chore(release): 4.1.0 [skip ci] ## [4.1.0](https://github.com/custom-cards/button-card/compare/v4.0.1...v4.1.0) (2023-08-03) ### Features * **templates:** Support for one time evaluation of js temp... — committed to custom-cards/button-card by semantic-release-bot a year ago

Most upvoted comments

My two Cents - this Card is about customizing as one likes, so a forced margin is not the most nice Thing 😉 Anyway, if mentioned in the Docs, that should be okay as well.

I agree, I’ll revert it 😃

RomRider on Aug 1, 2023

Ok, I found it… it’s not a bug, it’s actually how HA would do it haha. But some CSS has changed, that’s true.

  #container.vertical div#img-cell + div,
  #container.name_state div#img-cell + div {
    margin-top: 8px;
  }

Should I revert that ? I think it’s created a whole lot of problems…

For the code in the first post of the issue, @dafunkydan, can you try to fix it manually with:

styles:
  name:
    - margin-top: unset

Let me know if it gets back to what you expect?

RomRider on Aug 1, 2023

I’ll have a look at that today. There’s several small CSS issues it seems.

RomRider on Aug 1, 2023

tbh, I am not seeing this anywhere at all… so it might exists in your system, I can not reproduce at all.

could you please try a minimal card config to show the issue and share that?

Mariusthvdb on Jul 31, 2023