Custom Layout Card Usage

Ryan_Grandy · July 26, 2019, 4:54am

I am trying to use the horizontal custom layout card within a vertical stack card. Is this possible?

It doesn’t seem to want to be laid out horizontally, and instead just stacks vertically. See the lights group in the image below.

# Section 3
  - cards:
      - color: 'rgb(44, 109, 214)'
        color_type: label-card
        name: Lights
        type: 'custom:button-card'
      - layout: horizontal
        type: 'custom:layout-card'
        cards:
          - aspect_ratio: 1/1
            color: 'rgb(66, 134, 244)'
            color_type: card
            entity: light.kitchen_lights
            icon: 'mdi:lightbulb-on-outline'
            name: Lights
            tap_action:
              action: more-info
            type: 'custom:button-card'
          - aspect_ratio: 1/1
            color: 'rgb(66, 134, 244)'
            color_type: card
            icon: 'mdi:ceiling-light'
            name: Dim All Lights
            show_icon: true
            show_state: false
            tap_action:
              action: call-service
              service: mqtt.publish
              service_data:
                payload: tv_lights
                topic: lights
            type: 'custom:button-card'
    type: vertical-stack

Ryan_Grandy · July 26, 2019, 5:07am

Okay I just figured it out after struggling for sometime.

I needed to include - column_num in the code. It wasn’t super apparent to me in the documentation that this was required, maybe I missed it, idk. Seems to work great now.

thomasloven · July 26, 2019, 8:46pm

That shouldn’t be necessary… I’ll look into it.

But why not a horizontal-stack?

Ryan_Grandy · July 26, 2019, 8:58pm

I wanted to have the buttons the same size no matter how many I included, but have them centered (see below). Your layout-card lets me specify the max width of the columns in percentage which seems to make this easy while allowing the buttons to scale depending on screen. Is there a better way to accomplish this?