I just started working with the Lovelace interface today (writing my own yaml files). I was able to get the back setup working but now wanted to change the cards from vertical to horizontal stacking. When I add that command, the cards do not change and stay vertical. Any ideas why?
title: My Home
# Include external resources
resources:
# https://github.com/custom-cards/button-card
- url: /local/button-card.js
type: module
# https://github.com/custom-components/custom_updater
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
#background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
#excluded_entities:
# - weblink.router
views:
# View tab title.
- title: Example
# Unique path for direct access /lovelace/${path}
path: example
# Cards
cards:
- type: "custom:button-card"
entity: switch.den_table_lamp_tv
name: TV Lamp
#icon: midi:sofa
#color_type: card
color: auto
# Title of the view. Will be used as the tooltip for tab icon
- type: horizontal-stack
title: Den
path: Den
icon: mdi:home-assistant
cards:
- type: "custom:button-card"
entity: switch.den_table_lamp_stairs
name: Stairs Lamp
#icon: midi:sofa
color_type: card
color: auto
styles:
card:
- height: 110px
- width: 110px
- type: "custom:button-card"
entity: switch.den_table_lamp_tv
#name: TV Lamp
#icon: midi:sofa
#color_type: card
color: auto
size: 25%
- type: horizontal-stack
title: Outside
path: Outside
icon: mdi:home-assistant
cards:
- type: "custom:button-card"
entity: binary_sensor.backdoor_sensor
name: Back Door
#icon: midi:sofa
color_type: card
color: auto
styles:
card:
- height: 110px
- width: 110px
- type: "custom:button-card"
entity: switch.front_door_light
#label_template: >
# var bri = states['light.test_light'].attributes.brightness;
# return 'Brightness: ' + (bri ? bri : '0') + '%';
#name: Stairs Lamp
#icon: midi:sofa
color_type: card
color: auto
styles:
card:
- height: 110px
- width: 110px
You need to put the horizontal stack one level deeper. Currently you are defining the view as horizontal stack but instead the first card of the view should be the horizontal stack.
