Issue with stacking

Configuration Frontend
1

Good Morning all.

Having an issue with the horizontal and vertical integrating two cards together…

I created this before:

image
image1170×370 41.5 KB

And decided I wanted to add it in with the alarm panel…but all my icons stack vertically and not beside as image above

image
image1170×2225 100 KB 

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: alarm-panel
        entity: alarm_control_panel.alarm
    states:
      - arm_home
      - arm_away
  - type: custom:mushroom-entity-card
    entity: binary_sensor.garage_bar
    name: Bar/Garage
    icon_color: red
    fill_container: false
    layout: vertical
  - type: custom:mushroom-entity-card
    entity: binary_sensor.kitchen
    icon_color: red
    layout: vertical
  - type: custom:mushroom-entity-card
    entity: binary_sensor.hallway
    layout: vertical
    icon_color: red
  - type: custom:mushroom-entity-card
    entity: binary_sensor.lounge
    layout: vertical
    icon_color: red
  - type: custom:mushroom-entity-card
    entity: binary_sensor.tamper
    icon: mdi:screwdriver
    icon_color: red
    layout: vertical

Any help with this would be much appreciated!

3

Your cards are all sitting in a vertical stack. You need to add another horizontal stack to give you something like this

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: alarm-panel
        entity: alarm_control_panel.alarm
    states:
      - arm_home
      - arm_away
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: binary_sensor.garage_bar
        name: Bar/Garage
        icon_color: red
        fill_container: false
        layout: vertical
      - type: custom:mushroom-entity-card
        entity: binary_sensor.kitchen
        icon_color: red
        layout: vertical
      - type: custom:mushroom-entity-card
        entity: binary_sensor.hallway
        layout: vertical
        icon_color: red
      - type: custom:mushroom-entity-card
        entity: binary_sensor.lounge
        layout: vertical
        icon_color: red
      - type: custom:mushroom-entity-card
        entity: binary_sensor.tamper
        icon: mdi:screwdriver
        icon_color: red
        layout: vertical
4

I tried to do this, I get bad indentation errors

5

I tried it before I get

Invalid configuration:
type: horizontal-stack
cards: null

6

There was one indentation incorrect in the above example. The UI would have pointed you to it. I have fixed it now.

7

Thanks, works!

Sorry still learning and trying to figure all the indentation things out (getting there)

1 Like