Hello,
I’m not sure if this is a bug or if I’m doing something incorrectly. Appreciate the assistance.
I have a dashboard that shows the status of my home’s binary sensors and alarm panel.
I’m using custom:button-card with horizontal-stack and vertical stack cards.
For simplicity’s sake, I’ve made all of the entities in the code snippet below the same but have named them according to their position on the grid- So R2xC3 = Row 2 x Column 3, and so forth.
As you can see in the pictures, whenever I create R3xC2-Top and R3xC2-Bottom, it causes R3xC3 to shift to the right. The width of R3xC2-Top or R3xC2-Bottom does not make a difference. I’ve changed them to 100px and that causes the cards to shrink but R3xC3 will still show up off- grid.
The odd part is that the R3xC3 looks fine in the card configuration UI, it only goes off-grid when I save it.
Here is my configuration:
cards:
- cards:
- entity: binary_sensor.front_entry
name: R1xC1
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R1xC2
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R1xC3
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: binary_sensor.front_entry
name: R2xC1
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R2xC2
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R2xC3
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: binary_sensor.front_entry
name: R3xC1
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- cards:
- entity: sensor.ups_transfer_to_battery
name: R3xC2-Top
show_icon: false
show_state: true
styles:
card:
- height: 55px
- width: 151px
- font-size: 12px
font-size: null
type: 'custom:button-card'
- entity: sensor.ups_total_time_on_battery
name: R3xC2-Bottom
show_icon: false
show_state: true
styles:
card:
- height: 55px
- width: 151px
- font-size: 12px
type: 'custom:button-card'
type: vertical-stack
- entity: binary_sensor.front_entry
name: R3xC3
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: binary_sensor.front_entry
name: R4xC1
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R4xC2
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
- entity: binary_sensor.front_entry
name: R4xC3
icon: 'mdi:door'
state:
- color: 'rgb(255,0,0)'
icon: 'mdi:door-open'
value: 'on'
styles:
card:
- height: 118px
- width: 151px
name:
- font-size: 15px
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack