Can't make layout-card work in YAML mode dashboard

Hi - I’ve spent the whole evening searching for this issue and I’m 99% sure it’s incorrectly formatted YAML but for the lift of me can’t figure it out.

I have installed layout-card in HACS. I can create the card in a UI configured dashboard. I have ensured I add the folowing in my configuration.yaml and restarted

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module

But when I try to use it in my YAML configured dashboard, upon clicking the button for the popup card, the popup appears but contains the error message No Card Type Configured

Can anyone please tell me what I’m doing wrong? The entire file is huge so I’ve tried to trim down to what’s relevant hopefully it’s enough for someone to be able to figure out where I’m going wrong?

      - view_layout:
          grid-area: lounge
        type: custom:mod-card
        style:
          .: |
            ha-card {
              background-color: transparent;
            }
          hui-grid-card$: |
            #root {
              justify-items: center !important;
              box-shadow: none;
              min-width: 245px;
            }
        card:
          type: grid
          columns: 1
          square: false
          cards:
            - type: "custom:button-card"
              template: button_content_group
              name: Lounge
              custom_fields:
                tiny_buttons:
                  card:
                    type: horizontal-stack
                    cards:
                      - type: "custom:button-card"
                        template:
                          - button_content_group_tiny
                          - button_temperature
                        entity: sensor.lounge_current_temperature
                      - type: "custom:button-card"
                        template:
                          - button_content_group_tiny
                          - button_heating
                        entity: binary_sensor.lounge_is_heating
                action_buttons:
                  card:
                    type: horizontal-stack
                    cards:
                      - type: "custom:button-card"
                        template: button_content_group_action
                        entity: light.lounge_lights
                        tap_action:
                          action: fire-dom-event
                          browser_mod:
                            service: browser_mod.popup
                            data:
                              title: Lounge Lights
                              content:
                                card:
                                  type: custom:layout-card
                                  layout_type: custom:horizontal-layout
                                  cards:
                                    show_name: false
                                    show_icon: true
                                    type: button
                                    tap_action:
                                      action: toggle
                                    name: Sofa
                                    show_state:
                                    sentity: light.lnge_hue_bulb_lamp_01_1
                                  layout:
                                    width: 150
                                    max_cols: 4

Thanks in advance for any yaml tips - I absolutely hate YAML :frowning:

To start, 2 questions

  1. Are you editing in the raw configuration editor or the card code editor?

  2. Did you go here ?
    image

and select

Argh - sorry should have made that clear in my original post. No I am in not using either of those I am writing the dashboard in YAML mode - so haven’t done the thing you showed in #2, no.

I thought adding

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module

to my configuration.yaml was the equivalent of this foir YAML mode?

Certainly I have also got

    - url: /hacsfiles/button-card/button-card.js
      type: module

And I am able to use the button-card no problem as the bulk of the dashboard is made of these…

Layout card can handle the entire lovelace dashboard and also can be used inside lovelace cards. The top of my raw configuration starts with :

title: Home
views:
  - title: New Dash
    path: new-dash
    layout:
      width: 350
      max_cols: 4
    type: custom:horizontal-layout
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr 1fr
          margin: 0px 0px -10px -0px
        cards:
          - type: custom:button-card
            entity: light.pc_hue_bar
          - type: custom:button-card
            entity: light.pc_hue_bar

From there you can add all the buttons you want. There are options to add things to the header, but I think it’s best you get a basic dashboard up and running.

This is an example of the layout card used for the dashboard (horizontal) and for a card with two buttons using the layout grid card


Ignore the TEST an PICTURE DASH. Those aren’t part of what I am explaining.