Horizontal stack issue/understanding

Configuration Frontend
1

Hello,
I’m trying to use horizontal stack with mushroom card. I’m setting this up according to a video that I have seen (no coding). The only thing that happens and I can’t figure out is that the card are being displayed in a strange way (see screenshot).
Why don’t they are being displayed below the other cards?
I have updated the my home assistant to the latest version.
Thank you

image
image1320×722 20.6 KB

2

Can you post your code using the community standards? It will help expedite a solution.

3

Hello,
Below the code that was used for this dashboard.

Regards,
sasa

views:
  - title: Home
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
          - type: weather
            entity: weather.knmi_thuis
            show_conditions: true
            show_temperature: true
          - type: light
            entity: light.slaapkamer_zolder_trap
          - type: back
      - type: custom:mushroom-title-card
        title: ''
        subtitle: |-
          {% set time = now().hour %}
          {% if (time >= 18) %}
            Good Evening, {{user}}!
          {% elif (time >= 12) %}
            Good Afternoon, {{user}}!
          {% elif (time >= 5) %}
            Good Morning, {{user}}!
          {% else %}
            Hello, {{user}}!
          {% endif %}
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: house
            secondary: ''
            icon: mdi:home-plus-outline
            icon_color: blue
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: house
          - type: custom:mushroom-template-card
            primary: Lights
            secondary: ''
            icon: mdi:lightbulb
            icon_color: yellow
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: lights
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: custom:mushroom-template-card
            primary: Control
            secondary: ''
            icon: mdi:camera-control
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: control
            icon_color: purple
      - type: custom:mushroom-title-card
        title: ''
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
        subtitle: Rooms
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.slaapkamer_zolder_trap
            layout: vertical
            icon_color: primary
            name: Zolder
          - type: custom:mushroom-light-card
            entity: light.3_zolder_slaapkamer
            name: Slaapkamer
            layout: vertical
          - type: custom:mushroom-light-card
            entity: light.3_zolder_slaapkamer
            name: Hal
            layout: vertical
    subview: true
4

can you also use arrows to show where you want the cards? Do you want 6 in a row or a block of 6?

image
image896×286 4.16 KB

5

Below optins 2. If you look at the sceenshot that I have sent it should be below the title Rooms.

image
image692×229 6.43 KB

6

When you use this you are at the dashboard level

views:
  - title: Home

This is the card code.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: weather
        entity: weather.knmi_thuis
        show_conditions: true
        show_temperature: true
      - type: light
        entity: light.slaapkamer_zolder_trap
      - type: back
  - type: custom:mushroom-title-card
    title: ''
    subtitle: |-
      {% set time = now().hour %}
       {% if (time >= 18) %}
         Good Evening, {{user}}!
       {% elif (time >= 12) %}
         Good Afternoon, {{user}}!
       {% elif (time >= 5) %}
         Good Morning, {{user}}!
       {% else %}
         Hello, {{user}}!
       {% endif %}
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
  - type: custom:mushroom-title-card
    title: ''
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
    subtitle: Rooms
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: house
        secondary: ''
        icon: mdi:home-plus-outline
        icon_color: blue
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: house
      - type: custom:mushroom-template-card
        primary: Lights
        secondary: ''
        icon: mdi:lightbulb
        icon_color: yellow
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: Control
        secondary: ''
        icon: mdi:camera-control
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: control
        icon_color: purple
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.slaapkamer_zolder_trap
        layout: vertical
        icon_color: primary
        name: Zolder
      - type: custom:mushroom-light-card
        entity: light.3_zolder_slaapkamer
        name: Slaapkamer
        layout: vertical
      - type: custom:mushroom-light-card
        entity: light.3_zolder_slaapkamer
        name: Hal
        layout: vertical

image
image950×818 33 KB

1 Like
7

than you this worked.

1 Like