Configuration with vertical stack within a horizontal stack

heartkingz · July 20, 2020, 12:18pm

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!

Markus99 · July 20, 2020, 1:40pm

I’ve been using a custom ‘stack-in’ card coupled with ‘card-mod’ and had pretty good success.

Both available via HACS

phio · October 4, 2024, 7:42pm

4 years later, this still seems broken

The inclusion of a vertical-stack inside a horizontal-stack does something strange to the alignment of the cards, and the HACS integrations have their own problems. In particular the custom:layout-card seems unmaintained at this point and adds undesired margins around cards that cannot be removed.

This is the closest I’ve come to what I want to achieve using the custom:layout-card (with the aforementioned problems of unwanted margins that cannot be removed):

I need it optimised for the mobile app so that it displays nicely on multiple screen widths.

I tried to go back to basics but vertical-stacks inside horizontal-stacks just seem broken.

Here is an example of an early prototype which appears fine, with 4 cards that have fixed width, and one with variable width.

Here is the definition:

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Parent's room
    show_icon: false
    show_state: true
    show_name: true
    entity: sensor.guest_bedroom_heater_utility_meter
    styles:
      card:
        - font-size: 14px
        - height: 60px
      name:
        - justify-self: start
        - padding-left: 10px
      state:
        - justify-self: start
        - padding-left: 30px
  - type: custom:button-card
    color_type: auto
    name: Temp
    show_name: true
    show_icon: false
    show_state: true
    entity: sensor.guest_bedroom_th_temperature
    styles:
      card:
        - font-size: 14px
        - width: 70px
        - height: 60px
      state:
        - color: |
            [[[
              if (entity.state < 20) return '#7EB6FF';
              else if (entity.state >= 20 && entity.state < 23) return '#FFC300';
              else if (entity.state >= 23 && entity.state < 25) return '#FF7E7E';
              else return '#FF3030';
            ]]]
  - type: custom:button-card
    color_type: auto
    name: Set temp
    show_name: true
    show_icon: false
    show_state: true
    entity: sensor.guest_bedroom_th_temperature
    styles:
      card:
        - font-size: 14px
        - width: 70px
        - height: 60px
      state:
        - color: |
            [[[
              if (entity.state < 20) return '#7EB6FF';
              else if (entity.state >= 20 && entity.state < 23) return '#FFC300';
              else if (entity.state >= 23 && entity.state < 25) return '#FF7E7E';
              else return '#FF3030';
            ]]]
  - type: custom:button-card
    color_type: auto
    icon: mdi:minus
    show_name: false
    tap_action:
      action: call-service
      service: input_number.decrement
      data:
        entity_id: input_number.living_room_aircon_override_timer
    styles:
      card:
        - width: 50px
        - height: 60px
  - type: custom:button-card
    color_type: auto
    icon: mdi:plus
    show_name: false
    tap_action:
      action: call-service
      service: input_number.increment
      data:
        entity_id: input_number.living_room_aircon_override_timer
    styles:
      card:
        - width: 50px
        - height: 60px

But when I add the vertical stack, all the cards get pushed to the left, and there seems to be no way to achieve the desired result illustrated in the first picture.

Here is the config:

type: horizontal-stack
cards:
  - type: custom:button-card
    name: Parent's room
    show_icon: false
    show_state: true
    show_name: true
    entity: sensor.guest_bedroom_heater_utility_meter
    styles:
      card:
        - font-size: 14px
        - height: 60px
      name:
        - justify-self: start
        - padding-left: 10px
      state:
        - justify-self: start
        - padding-left: 30px
  - type: custom:button-card
    color_type: auto
    name: Temp
    show_name: true
    show_icon: false
    show_state: true
    entity: sensor.guest_bedroom_th_temperature
    styles:
      card:
        - font-size: 14px
        - width: 70px
        - height: 60px
      state:
        - color: |
            [[[
              if (entity.state < 20) return '#7EB6FF';
              else if (entity.state >= 20 && entity.state < 23) return '#FFC300';
              else if (entity.state >= 23 && entity.state < 25) return '#FF7E7E';
              else return '#FF3030';
            ]]]
  - type: custom:button-card
    color_type: auto
    name: Set temp
    show_name: true
    show_icon: false
    show_state: true
    entity: sensor.guest_bedroom_th_temperature
    styles:
      card:
        - font-size: 14px
        - width: 70px
        - height: 60px
      state:
        - color: |
            [[[
              if (entity.state < 20) return '#7EB6FF';
              else if (entity.state >= 20 && entity.state < 23) return '#FFC300';
              else if (entity.state >= 23 && entity.state < 25) return '#FF7E7E';
              else return '#FF3030';
            ]]]
  - type: vertical-stack
    cards:
      - type: custom:button-card
        color_type: auto
        icon: mdi:plus
        show_name: false
        tap_action:
          action: call-service
          service: input_number.increment
          data:
            entity_id: input_number.living_room_aircon_override_timer
        styles:
          card:
            - width: 50px
            - height: 25px
            - justify-self: end
      - type: custom:button-card
        color_type: auto
        icon: mdi:minus
        show_name: false
        tap_action:
          action: call-service
          service: input_number.decrement
          data:
            entity_id: input_number.living_room_aircon_override_timer
        styles:
          card:
            - width: 50px
            - height: 25px
            - justify-self: end