vertical-stack-in-card
vertical-stack-in-card copied to clipboard
Space appearing between different entities
Hi guys,
I am using vertical-stack-in-card in conjunction with horizontal-card and button-card. At first it seemed to work just perfect, but now it will occasionally display the entities with gaps in between like so:
Here is an example of the setup with one entity:
type: 'custom:vertical-stack-in-card'
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: card
entity: binary_sensor.pir_sensor
show_last_changed: true
size: 50%
styles:
name:
- font-size: 12px
- font-weight: bold
label:
- font-size: 12px
state:
- value: 'on'
color: yellow
icon: 'mdi:motion-sensor'
styles:
card:
- animation: blink 2s linear infinite
- operator: default
color: null
icon: 'mdi:motion-sensor'
I’ve noticed extra spacing between the title at the top and the entities below compared to ‘regular’ cards.
Would be great if this was fixed, or if we could be able to tweak the padding ourselves.
Yup I'm seeing this as well and it's not with all the cards either. Below is what i'm seeing, i've noticed this with entity-filter cards and a few others.
type: 'custom:vertical-stack-in-card'
cards:
- entities:
- entity: input_boolean.modem_reboot
icon: 'mdi:access-point'
name: Modem Reboot
- entity: input_boolean.router_reboot
icon: 'mdi:router-wireless'
name: Router Reboot
show_header_toggle: false
title: System Status
type: entities
- type: thermostat
entity: climate.dining_room
- type: entity-filter
entities:
- sensor.front_door_keypad_battery
- sensor.water_battery_level
state_filter:
- operator: '>'
value: 50
- type: entities
entities:
- entity: sensor.dark_sky_precip_probability_0d
- entity: sensor.dark_sky_apparent_temperature
I managed to get around this (mostly) by playing around with the padding, removing the shadow etc.
- type: custom:vertical-stack-in-card
cards:
- type: entities
title: "Xbox One"
show_header_toggle: false
entities:
- entity: sensor.xbox_username
- type: picture-entity
style: |
ha-card {
background: none;
box-shadow: none;
padding-top: 0;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
entity: sensor.xbox_currently_playing
Could not work around this. Looks quite seperate and not really good :-(
I have the same problem (I use Google Dark Theme)