2 Horizontal Cards Stacked with title - height not correct

Configuration Frontend
1

Hi All,

i am trying to stack two horizontal cards into a horizontal card which is in a vertical stack. Unfortunately the height seems to be not calculated correctly. Now the elements are a bit over each other. I also tried to reduce complexity by just having the horizontal cards in the horizontal card. But the error is the same.
I want to achieve that on the inner horizontal card there is a title for the two button cards.

grafik

Code:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        title: Büro
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: cover.buero_links_level
            name: links
            show_state: false
            icon_height: 20px
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: cover.rolladen_office_rechts_level
            name: rechts
            icon_height: 20px
      - type: horizontal-stack
        title: Studio
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: cover.rolladen_fotostudio_links_level
            name: links
            icon_height: 20px
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: cover.rolladen_fotostudio_rechts_level
            name: rechts
            icon_height: 20px
  - type: horizontal-stack
    title: Schaufensterbeleuchtung
    cards:
      - show_name: true
        show_icon: true
        name: Büro
        type: button
        tap_action:
          action: toggle
        entity: switch.schaufenster_buero
      - show_name: true
        show_icon: true
        name: Studio
        type: button
        tap_action:
          action: toggle
        entity: switch.schaufenster_studio

Can anyone help me to get this sorted out?

2

This is a bug.

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        title: title
        cards:
        - type: button
        - type: button
      - type: horizontal-stack
        title: title
        cards:
        - type: button
        - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button

изображение
изображение493×558 8.05 KB

card-mod may be used as a temp. fix.

1 Like
3

Thanks a lot, i was expecting that i missed some option somewhere, or it is generally not working. Thanks for opening the issue on github.

4

As a workaround - try using grid:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: grid
        title: title
        columns: 2
        square: false
        cards:
          - show_name: true
            show_icon: true
            type: button
          - type: button
      - type: grid
        title: title
        columns: 2
        square: false
        cards:
          - type: button
          - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button

изображение
изображение497×539 9.14 KB