Lovelace layout issue

Configuration
1

I recently moved to the Lovelace interface and have my first page/cards setup but having a issue with layout. I’ve attached a pic of my page but expected the cards on the right which were not displayed to be put on the 2nd line. What am I missing on the card layout?

Capture
Capture1284×507 18.2 KB

2

show us the lovelace code them we be able to help in the right formating

3

Oops… forgot to include this in my original post

  # Title of the view. Will be used as the tooltip for tab icon
  - title: Lights
    path: lights
    icon: mdi:lamp
    #panel: true
    cards:
      - type: horizontal-stack    
        cards:
          - type: "custom:button-card"
            entity: switch.den_table_lamp_tv
            name: TV Lamp
            #icon: midi:sofa
            #color_type: card
            color: auto
            #size: 25%
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.den_table_lamp_stairs
            name: Stairs Lamp
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.front_door_light
            name: Front Door
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.back_door_lights
            name: Back Door
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.back_yard_lights
            name: Back Yard
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.garage_light
            name: Garage
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: binary_sensor.backdoor_sensor
            name: Back Door Motion
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.master_bedroom_table_lamp
            name: Master Bedroom
            #icon: midi:sofa
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px
4

Everything’s in a single horizontal stack, you’ve told Lovelace to put them all on the same row by doing that.

The a second horizontal stack where you want the break to be. It needs to be at the same level of indentation as the first.

5

Ok… I didn’t know I had to do the break myself. Do I add another “-type: horizontal-stack” or is there a “break” command? Also, is there a variable/setting which allows me to increase the size of the horizontal card (so I can put more entities per line)?

6

Yes another - type: horizontal-stack indented the same as the first with the cards for the second row under it.

7

Here’s my revised code but still showing all cards on one line…

# Title of the view. Will be used as the tooltip for tab icon
title: Lights
path: lights
icon: mdi:lamp
#panel: true
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack    
        cards:
          - type: "custom:button-card"
            entity: switch.den_table_lamp_tv
            name: TV Lamp
            #icon: midi:sofa
            #color_type: card
            color: auto
            #size: 25%
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.den_table_lamp_stairs
            name: Stairs Lamp
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.front_door_light
            name: Front Door
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

      - type: horizontal-stack    
        cards: 
          - type: "custom:button-card"
            entity: switch.back_door_lights
            name: Back Door
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.back_yard_lights
            name: Back Yard
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.garage_light
            name: Garage
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: binary_sensor.backdoor_sensor
            name: Back Door Motion
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px

          - type: "custom:button-card"
            entity: switch.master_bedroom_table_lamp
            name: Master Bedroom
            color: auto
            styles:
              card:
                - height: 110px
                - width: 110px
8

When you make changes to the interface you need to clear the cache and reload the page. Easiest way to do that is holding CTRL and pressing F5.

9

I’ve already tried that without success

10

Not sure what to tell you. Your code is correct. The only thing it can be is a refresh issue. Unless you don’t have lovelace yaml mode on.