Open StevenBrs opened 2 months ago
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
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.
Post your config code here, I'll try to help you if I can.
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
@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 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:
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. 😃
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
aspect_ratio: 1/1
Thanks! Works like a charm :-)
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.
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
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.
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:
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.
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.
Checklist
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:
Screenshots
Expected behavior
Smartphone (please complete the following information):
Additional context