Luth1ng
November 14, 2021, 4:13pm
1
Hello there, hope someone could help me.
I can’t figure out to stretch my mini-graph-card inside a button-card. There is a space between bottom of the card and the graph.
Here’s my code :
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chair-rolling
entity: sensor.ble_temperature_thermometre1
name: Bureau
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.ble_temperature_thermometre1
show:
icon: false
name: false
state: false
line_width: 5
hu: |
[[[
return `<ha-icon
icon="mdi:water-percent:"
style="width:20px;color: skyblue;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.ble_humidity_thermometre1'].state}%</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer:"
style="width:20px;color:var(--accent-color);">
</ha-icon><span>${entity.state}°C</span>`
]]]
styles:
custom_fields:
graph:
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n i" "temp hu" "graph graph"'
- grid-template-columns: 50% 50%
- grid-template-rows: 1fr 1fr 1fr
- overflow: unset
name:
- font-size: 16px
- color: white
state:
- font-size: 10px
- color: white
And with setting
styles:
grid:
- grid-template-rows: 30% 30% 100%
The card is higher than others in my horizontal stack…
Many thanks for your help
Luth1ng
November 15, 2021, 2:43am
2
Is there a way to make this working ?
Luth1ng
November 15, 2021, 1:20pm
3
May anyone help me please
Luth1ng
November 30, 2022, 7:36am
5
For those are asking how to fix that, you’ll have to play with :
styles card height
mini-graph-card height
if you’re using grid, the grid space is tricky. Use very low % values.
z-index to let the graph displays other things
Example:
type: custom:button-card
entity: sensor.myentity
styles:
card:
- padding: 0%
- margin: 0%
- height: 100px
grid:
- grid-template-areas: '"i n" "i hits" "graph graph"'
- grid-template-columns: 20% 1fr
- grid-template-rows: 33% 33% 3%
name:
- z-index: 1
icon:
- z-index: 1
custom_fields:
graph:
- z-index: 0
custom_fields:
graph:
card:
type: custom:mini-graph-card
height: 50
1 Like
Quite a bit too late, I know, but the accepted answer is not correct. It may work, but it’s not the proper solution. The issue is that the custom button card has bottom padding.
Example I was working on. This has the same gap at the bottom.
With the element selected in the inspector, you can see the green area, which is padding.
Again, with the element selected in the inspector, we can see there’s almost 5 pixels of bottom padding.
To fix this, simply add - padding-bottom: 0 to your card styling. You could do the same for padding-top if you’d want to.
Side by side. Original on the left, result on the right.
Now if only I knew how to remove that border around the graph…
You can remove the border with card-mod…
type: custom:mini-graph-card
entities:
- sensor.ble_temperature_thermometre1
show:
icon: false
name: false
state: false
line_width: 5
card_mod:
style: |
ha-card {
border: none;
}
Menelao
December 9, 2024, 8:53am
8
Hi everyone!
I was inspired by the setup described in this thread and tried to create a card with a tap_action that opens a popup. However, I’ve encountered an issue: the popup only opens when I click on the values, but not on the graph area.
Here’s the code I’m using for the card:
type: custom:button-card
entity: sensor.cameretta_ambiente
show_icon: false
show_name: false
aspect_ratio: 2.3/1
styles:
card:
- padding: 0%
- margin: 0%
- background-color: rgba(255, 255, 255, 0.25)
- border-radius: 5%
- font-size: 0.75vw
grid:
- grid-template-areas: "\"setpoint temp\" \"humi ahumi\" \"graph graph\""
- grid-template-columns: 1fr 1fr
- grid-template-rows: 25% 25% 50%
custom_fields:
setpoint:
- padding: 10% 0% 0% 10%
- align-self: center
- justify-self: left
- "--icon-color-sp": |-
[[[
if (variables.riscaldamento == true) return 'FireBrick';
else return 'White';
]]]
- z-index: 1
temp:
- padding: 10% 0% 0% 0%
- align-self: center
- justify-self: left
- "--icon-color-tsensor": |-
[[[
if (((variables.sptemperature - variables.temperature) < 1 && (variables.sptemperature - variables.temperature) > -2) || states['climate.riscaldamento'].state == 'off') return 'YellowGreen';
else if ((variables.sptemperature - variables.temperature) < 2 && (variables.sptemperature - variables.temperature) > 0) return 'CornflowerBlue';
else if ((variables.sptemperature - variables.temperature) > 2) return 'Cornsilk';
else return 'FireBrick';
]]]
- z-index: 1
humi:
- padding: 18% 0% 0% 10%
- align-self: center
- justify-self: left
- "--icon-color-hsensor": |-
[[[
if (variables.humidity <= variables.sphumidity) return 'YellowGreen';
else if (variables.humidity <= (variables.sphumidity + variables.hyshumidity)) return 'CornflowerBlue';
else return 'Crimson'
- z-index: 1;
]]]
ahumi:
- padding: 18% 0% 0% 0%
- align-self: center
- justify-self: left
- z-index: 1
graph:
- filter: opacity(50%)
- overflow: unset
- z-index: 0
variables:
entity_setpoint: null
riscaldamento: |
[[[return entity.attributes.riscaldamento;]]]
temperature: |
[[[return entity.state;]]]
sptemperature: |
[[[return entity.attributes.temperature_setpoint;]]]
humidity: |
[[[return entity.attributes.humidity;]]]
sphumidity: |
[[[return entity.attributes.humidity_setpoint;]]]
ahumidity: |
[[[return entity.attributes.absolute_humidity;]]]
hyshumidity: |
[[[return entity.attributes.humidity_hysteresis;]]]
name: >
[[[return ((entity.entity_id.split('.')[1]).split('_')[0])[0].toUpperCase()
+ ((entity.entity_id.split('.')[1]).split('_')[0]).slice(1) ]]]
custom_fields:
setpoint: |
[[[
return `<ha-icon icon="mdi:home-thermometer" style="width: 1.2vw; height: 1.2vw; color: var(--icon-color-sp);">
</ha-icon><span style="color: white;">${variables.sptemperature}°C</span>`
]]]
temp: |
[[[
return `<ha-icon icon="mdi:thermometer" style="width: 1.2vw; height: 1.2vw; color: var(--icon-color-tsensor);">
</ha-icon><span style="color: white;">${variables.temperature}°C</span>`
]]]
humi: |
[[[
return `<ha-icon icon="mdi:water-percent" style="width: 1.2vw; height: 1.2vw; color: var(--icon-color-hsensor);">
</ha-icon><span style="color: white;">${variables.humidity}%</span>`
]]]
ahumi: |
[[[
return `<ha-icon icon="mdi:water-percent" style="width: 1.2vw; height: 1.2vw; color: white;">
</ha-icon><span style="color: white;">${variables.ahumidity}g/m³</span>`
]]]
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.cameretta_ambiente
name: Temperatura
color: "#4caf50"
show_points: false
- entity: sensor.cameretta_ambiente
name: Umidità
attribute: humidity
color: cyan
show_points: false
y_axis: secondary
hours_to_show: 3
points_per_hour: 10
height: 80
line_width: 2
hour24: true
smoothing: true
tap_action: none
show:
name: false
legend: false
icon: false
labels: false
state: false
fill: fade
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0,0,0,0);
border: none;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
div.mdc-dialog__scrim {
backdrop-filter: blur(0.7em) !important;
-webkit-backdrop-filter: blur(0.7em) !important;
background-color: rgba(0,0,0,0.1) !important;
}
content:
type: vertical-stack
cards:
- type: heading
heading: "[[[ return variables.name ]]]"
heading_style: subtitle
icon: cil:home-climate-outline
- type: custom:mini-graph-card
entities:
- entity: "[[[ return entity.entity_id ]]]"
name: Temperatura
color: "#4caf50"
show_legend: true
- entity: "[[[ return entity.entity_id ]]]"
attribute: temperature_setpoint
name: Setpoint
color: gray
smoothing: false
show_line: false
show_points: false
show_legend: true
show_state: true
hours_to_show: 12
points_per_hour: 10
height: 125
line_width: 2
hour24: true
smoothing: true
lower_bound: ~16
unit: °C
tap_action: none
align_state: center
show:
name: false
legend: true
icon: false
labels: true
state: true
fill: fade
- type: custom:mini-graph-card
entities:
- entity: "[[[ return entity.entity_id ]]]"
name: Umidità
attribute: humidity
color: cyan
- entity: "[[[ return entity.entity_id ]]]"
name: Setpoint
attribute: humidity_setpoint
color: gray
smoothing: false
show_line: false
show_points: false
show_legend: true
show_state: true
hours_to_show: 12
points_per_hour: 10
height: 125
line_width: 2
hour24: true
smoothing: true
unit: "%"
tap_action: none
align_state: center
show:
name: false
legend: true
icon: false
labels: true
state: true
fill: fade
- type: custom:mushroom-number-card
entity: "[[[ return variables.entity_setpoint ]]]"
layout: horizontal
name: Set Point
fill_container: false
tap_action:
action: none
double_tap_action:
action: none
display_mode: slider
Does anyone know how to make the entire card clickable, including the graph area? Maybe there’s a way to extend the tap_action area or adjust the card’s structure?
Thanks in advance for any tips!
?
