Styles Card Height 100% not working

[StevenBrs]

Checklist

• I updated the card to the latest version available
• [o] I cleared the cache of my browser
  —> IOS companion app

Describe the bug
Since update to HA 2024.7.4 the card height property 100% isn’t working anymore inside a grid.

Version of the card
Version: v4.1.2

To Reproduce
This is the configuration I used:

type: grid
square: true
columns: 3
cards:
  …
  - type: custom-button
    show_name: true
    show_icon: true
    entity: binary_sensor.xxx
    name: Status
    show_state: false
    styles:
      card:
        - height: 100%
    state:
      - value: 'on'
        icon: mdi:check-circle
        styles:
          icon:
            - color: green
      - value: 'off'
        icon: mdi:cancel
        styles:
          icon:
            - color: red

Screenshots

Expected behavior

Smartphone (please complete the following information):

• Device: iPhone13 mini
• OS: 17.5.1
• Browser: HA companion app
• Version: 2024.730

Additional context

• also in safari on IOS
• I always update HA in docker the first day of the month, to the highest minor version of the month before.
• Maybe the structure of the grid card in HA changed ?

[ngocjohn]

aspect_ratio: 1/1

      - type: grid
        square: true
        columns: 3
        cards:
          - &test_btn
            type: custom:button-card
            show_name: true
            show_icon: true
            aspect_ratio: 1/1
            entity: binary_sensor.developer
            name: Status
            show_state: false
            styles:
              card:
                - height: 100%
            state:
              - value: 'on'
                icon: mdi:check-circle
                styles:
                  icon:
                    - color: green
              - value: 'off'
                icon: mdi:cancel
                styles:
                  icon:
                    - color: red
          - *test_btn

[mateuszdrab]

In my case, my button card is in a horizontal-stack and I am not able to get it to fill the available space. I don't want to hard code an aspect ratio, I just want the card to do what the default cards do. Height 100% does nothing.

[ngocjohn]

Post your config code here, I'll try to help you if I can.

[mateuszdrab]

Hey @ngocjohn

This is the config:

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - entity: switch.dehumidifier_power
        state_not: unavailable
    card:
      entity: switch.dehumidifier_power
      type: custom:button-card
      show_state: true
      show_label: true
      name: Dehumidifier
      tap_action:
        action: toggle
        confirmation:
          text: Are you sure you want to press this button?
      hold_action:
        action: navigate
        navigation_path: /config/devices/device/68f2928dc83a50e24f2b54b63396d046
      styles:
        state:
          - color: var(--secondary-text-color)
          - font-size: 0.9rem
        label:
          - color: var(--secondary-text-color)
          - font-size: 0.9rem
      label: |
        [[[
          if (entity.state == 'on') { 
            if (states['binary_sensor.dehumidifier_compressor'].state == 'on') { 
               return "Dehumidifying";
             } 
             else 
             {
               return "Not Dehumidifying";
             }
          }
        ]]]
  - features:
      - type: target-temperature
    type: tile
    entity: climate.toshiba_ac_living_room
    vertical: true
    hide_state: false
    name: AC
    state_content: state
    hold_action:
      action: navigate
      navigation_path: /config/devices/device/03783981df3c7e6faa8bc362d639115f
  - features:
      - type: fan-speed
    type: tile
    entity: fan.floor_fan
    name: Fan
    vertical: true

[ngocjohn]

@mateuszdrab button-card is the whole grid, you can modify styles for grid-template..
https://github.com/custom-cards/button-card?tab=readme-ov-file#advanced-styling-options

https://css-tricks.com/snippets/css/complete-guide-grid/

styles:
  grid:
    - grid-gap: 1rem
    - padding: 1rem

[mateuszdrab]

@mateuszdrab button-card is the whole grid, you can modify styles for grid-template..
https://github.com/custom-cards/button-card?tab=readme-ov-file#advanced-styling-options

https://css-tricks.com/snippets/css/complete-guide-grid/

styles:
  grid:
    - grid-gap: 1rem
    - padding: 1rem

Thanks, this is much better.

There are two small issues though:

• large gaps between the lines
• looks like the bottom edge does not lay in line with the other two buttons

[ngocjohn]

Because they are not the same type of card, you have a different font size in styles than the other one, then of course it doesn't look good.... button-card is custom. I've just shown you other ways to work with the card. You have to edit it yourself, that's why many people have only one base universal button template. Which has common parameters and you insert entities or variables. One little tip, don't use too much card mod with custom button card. It's a custom itself, which can be used to do a lot of magic... Check out my config in my repo, you might get inspired. 😃

[Mariusthvdb]

Check out my config in my repo, you might get inspired. 😃

well.... I did, and got inspired by this:https://github.com/ngocjohn/hass-config/blob/c219b7081ef10313d1b14cea47daea336bd81045/config/dashboards/templates/button_card_templates/tpl_chips.yaml#L58C22-L58C69

can I reach out to you somewhere to have side chat? maybe in my community topic on using media aspects for an animation here?

Thanks if you could have a look

[StevenBrs]

aspect_ratio: 1/1

Thanks! Works like a charm :-)

[DanDixon]

I've also run into this issue.

This used to work:

    styles:
      card:
        - height: 100%

As of 2024.7.x, height as a percentage in custom card mod no longer works.

Thank you @StevenBrs for reporting this.

I also don't want to assign a fixed height or aspect ratio.

How parts of my dashboard look now:

The larger buttons are default; the short ones are custom-button cards that no longer respect 100% height.

[ngocjohn]

Again like the example above, create a base template for a button for example called square_button with modified css for the grid and apply with different entities.

      - type: custom:button-card
        entity: light.ceiling_lights
        template:
          - square_button
      - type: custom:button-card
        entity: fan.ceiling_fan
        template:
          - square_button
      - type: custom:button-card
        entity: switch.ceiling_switch
        template:
          - square_button

[DanDixon]

Again like the example above, create a base template for a button for example called square_button with modified css for the grid and apply with different entities.

I appreciate the help with the workaround, but that does not address the issue of height % not working anymore.

[Mariusthvdb]

I just discovered something alike:

using a button-card-template :

round_button:
  show_entity_picture: true
  aspect_ratio: 1
  size: 100%
  show_name: false
  tooltip: >
    [[[ return entity.attributes.friendly_name; ]]]
  styles:
    card:
      - border-radius: 100%
      - padding: 0

works for me in the normal cards section of a view. I use those for my camera streams.

however, using the same buttons in the badge section of the new Ha 2024.8 (which allows us to use custom cards as badges, the size no longer functions, nor does the aspect_ratio for that matter.

As a matter of fact, the only thing that changes the button is using the height and width on the card styles.... leaving out the template as those properties are not functional anyway.

but alas, the stream of the video doesn't follow along:

post in the community

its weird to see this happen, and I am not yet convinced this is a button-card issue, and fear it is caused by the way the new badges are implemented. Cant correct it yet either using card-mod, or any of the built-in styling features of button-card.

given this is an issue specific to the badges section for me, I believe I should hop over to the dedicated thread in the community, but just letting you know here as a FYI.

[adamjreed]

I ran into this same problem too. I was able to solve it locally by adding the following to the _cardHtml() method in the button-card.ts file, recompiling, and copying the locally built version to my HACS files. Hacky, but it got my cards working with height: 100% again.

if (configCardStyle.height) {
  this.style.setProperty('height', configCardStyle.height.toString());
}

This worked fine in the couple dashboards I use button-card in but YMMV. Seems likely it could conflict with other usages of the card since it's setting a style on the top level container. But I'm happy to submit a PR if the maintainers would like.