Hi,
Hope someone can help me out with this annoying configuration issue.
It used to work fine, but it looks like since 0.112 this issue started to appear.
I use the custom vertical stack in card inside the horizontal stack to make a grid with buttons in the center of a Lovelace view.
Problem is that right now it does not stay in the center.
I used th fix that by using the gap card on top to space out from the top.
It used to look like this:
Right now it looks like this:
I made the ‘‘grid’’ with two separate configurations. I’d like to make that a single card so it will stick in the center all the time because it is the only card there, but I’m really lost in the amount of lines already there…
So here is my config for the two cards:
cards:
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:office-building'
show_name: false
show_state: false
tap_action:
action: navigate
navigation_path: /hub-panel/office
template: template_office
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.window_sensor_office
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:window-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:window-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: media_player.sonos_kantoor
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:speaker'
value: playing
- color: '#8C8C8C'
icon: 'mdi:speaker-off'
value: paused
- color: '#8C8C8C'
icon: 'mdi:speaker-off'
value: idle
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
align: center
type: 'custom:vertical-stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:shower'
show_name: false
show_state: false
tap_action:
action: navigate
navigation_path: /hub-panel/bathroom
template: template_bathroom
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.motion_sensor_bathroom
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:run'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: media_player.sonos_badkamer
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:speaker'
value: playing
- color: '#8C8C8C'
icon: 'mdi:speaker-off'
value: paused
- color: '#8C8C8C'
icon: 'mdi:speaker-off'
value: idle
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:vertical-stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:washing-machine'
show_name: false
show_state: false
styles:
card:
- border-radius: 0px
- font-variant: small-caps
- background-color: 'rgba(50,50,50,0.3)'
- background-size: 100% 68px
tap_action:
action: navigate
navigation_path: /hub-panel/attic
template: template_attic
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.d1_mini_pir_attic
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:run'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
entity: binary_sensor.door_sensor_attic_door
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:door-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:door-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.window_sensor_attic
icon: 'mdi:window-open'
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:window-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:window-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:vertical-stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:flower-tulip-outline'
show_name: false
show_state: false
tap_action:
action: navigate
navigation_path: /hub-panel/garden
template: template_back_garden
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.door_sensor_back_door
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:door-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:door-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
entity: sensor.outside_temperature
show_name: false
show_state: true
styles:
card:
- padding: 11px 0px
- font-size: 10px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: light.achtertuin_gevel
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:coach-lamp'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:coach-lamp'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
and
cards:
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:door'
show_name: false
show_state: false
styles:
card:
- border-radius: 0px
- font-variant: small-caps
- background-color: 'rgba(50,50,50,0.3)'
- background-size: 100% 68px
tap_action:
action: navigate
navigation_path: /hub-panel/hallway
template: template_hallway
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.motion_sensor_hallway
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:run'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.door_sensor_front_door
icon: 'mdi:door'
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:door-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:door-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: switch.socket_relay_hallway
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:coach-lamp'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:coach-lamp'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:stairs'
show_name: false
show_state: false
styles:
card:
- border-radius: 0px
- font-variant: small-caps
- background-color: 'rgba(50,50,50,0.3)'
- background-size: 100% 68px
tap_action:
action: navigate
navigation_path: /hub-panel/upstairs-hallway
template: template_upstairs_hallway
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
color_type: null
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.motion_sensor_upstairs_hallway
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:run'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- height: 50px
- padding: opx px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:bed-queen-outline'
show_name: false
show_state: false
styles:
card:
- border-radius: 0px
- font-variant: small-caps
- background-color: 'rgba(50,50,50,0.3)'
- background-size: 100% 68px
tap_action:
action: navigate
navigation_path: /hub-panel/bedroom
template: template_master_bedroom
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
color_type: null
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
entity: sensor.temperature_master_bedroom
show_name: false
show_state: true
styles:
card:
- padding: 12px 0px
- font-size: 10px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.window_sensor_master_bedroom
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:window-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:window-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:stack-in-card'
- cards:
- aspect_ratio: 3/2
color_type: icon
icon: 'mdi:tshirt-crew-outline'
show_name: false
show_state: false
tap_action:
action: navigate
navigation_path: /hub-panel/walk-in-closet
template: template_walk_in_closet
type: 'custom:button-card'
- cards:
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.motion_walk_in_closet
icon: 'mdi:run'
show_name: false
show_state: false
state:
- color: '#216491'
icon: 'mdi:run'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:walk'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
color_type: null
template: template_security
type: 'custom:button-card'
- aspect_ratio: 3/3
color: auto
entity: binary_sensor.window_sensor_walk_in_closet
icon: 'mdi:window-open'
name: ' '
show_state: false
state:
- color: '#216491'
icon: 'mdi:window-open'
value: 'on'
- color: '#8C8C8C'
icon: 'mdi:window-closed'
value: 'off'
styles:
card:
- height: 50px
template: template_security
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
font-variant: small-caps;
--paper-card-background-color: rgba(34, 34, 34, .2);
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
border-radius: 5px;
}
.card-header {
font-size: 20px;
}
type: 'custom:stack-in-card'
type: horizontal-stack
Maybe I can fix this by a trick to force the cards to stay in the center. If there is one, I’d love to know.
Otherwise I’d like to combine both cards into one so this layout issue will not appear.
Maybe a long post, but I hope someone can help me. Thank you in advance!