🔹 Layout-card - Take control of where your cards end up

Ferador · March 19, 2021, 10:39am

Hi, i just updated to the newest version, but now my view for my vacuum is kinda broken.
I tried to show you what i mean. The picture shows the view after the update and on the lower right the boxes show how it should look like/how it was before the update.

I already tried to edit the code, but the only thing i was able to fix (at least i hope so) was the outer grid.

type: vertical-stack
cards:
  - type: 'custom:button-card'
    color: auto
    name: Home
    styles:
      card:
        - height: 5px
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/home
  - type: 'custom:layout-card'
    layout_type: grid
    layout_options:
      grid-template-columns: 400px 250px auto
    cards:
      - type: 'custom:xiaomi-vacuum-map-card'
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              height: 81%
            }
        entity: vacuum.wall_e
        map_camera: camera.wall_e_camera
        camera_calibration: true
        language: de
        debug: false
      - type: 'custom:layout-card'
        layout_type: vertical
        cards:
          - type: 'custom:layout-card'
            layout_type: horizontal
            layout_options:
              max_cols: 2
            cards:
              - type: vertical-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_esszimmer
                    icon: 'mdi:table-chair'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_flur
                    icon: 'mdi:door'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_kueche
                    icon: 'mdi:stove'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                view_layout:
                  column: 1
              - type: vertical-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_schlafzimmer
                    icon: 'mdi:bed'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_speisekammer
                    icon: 'mdi:food'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_wohnzimmer
                    icon: 'mdi:sofa'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                view_layout:
                  column: 2
            view_layout:
              column: 1
          - type: button
            tap_action:
              action: toggle
            entity: script.wall_e_entlehren
            icon: 'mdi:trash-can'
            show_name: false
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  width: 100%
                }
            view_layout:
              column: 1

What am i missing?

Amishman · March 19, 2021, 10:54am

What you need to do to make it span 100% is follow the Quick Start steps.

Do not select Panel mode.

Select Grid instead of Masonry.

Open up the view properties again and go to the “Layout” tab.
Enter the size of the column and rows you would like:

grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%
grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%

Then press the Add Card button and select the card you would like.
Make any adjustments using the GUI and then press the Show Code Editor.
Add the placement.

Either of these will work.

view_layout:
  grid-column: 1 / 3
  grid-row: 7 / 9

or

view_layout:
  grid-column-start: 1
  grid-column-end: 3
  grid-row-start: 7
  grid-row-end: 9

Here is an example:

type: gauge
entity: sensor.openweathermap_temperature
min: 0
max: 100
name: Temp
view_layout:
  grid-column: 1 / 3
  grid-row: 7 / 9

You can also change/add things by clicking on the 3 vertical dots in the upper right hand corner and selecting Edit Dashboard and then Raw Configuration Editor.

Hope this helps.

thomasloven · March 19, 2021, 11:05am

FROM 2.2.0 THE CARD OPTION `layout` IS CALLED `view_layout`

This was done to avoid collisions with parameters for other popular custom cards, and done in collaboration with their developers and the frontend dev team.

I updated your example code @Amishman. Hope you don’t mind.

@Ferador The horizontal layout will by default try to give each column at least 300 px of width. Play around with the width option, or try a grid layout for your red and green box.

Amishman · March 19, 2021, 12:13pm

Thanks for correcting the code @thomasloven. I didn’t know there was an update.

Vlavonvidden · March 19, 2021, 2:27pm

@thomasloven Thanks for the latest changes. This is simply awesome, media queries are so useful !

Chaps · March 19, 2021, 2:29pm

Hi,
Since 2.2.0, it is not possible anymore to assign two cards to the same grid-area and have them on top of one another.
Specifically, I tend to use this method to over-customize some cards, like two graph cards without the same unit or scale.

Is there a way to get the same result with this new version ?

Best regards and thanks for the awesome work !

thomasloven · March 19, 2021, 3:02pm

Can’t reproduce when using view_layout instead of layout.

Vlavonvidden · March 19, 2021, 3:08pm

Quick question for those who may have already updated their grid-config.
Is there a way to define multiple mediaqueries within the mediaquery option ?

mediaquery:
  "(max-width: 1300px)":
    grid-template-columns: 1fr 1fr
    grid-template-areas: |
      "chores1 vacuum1"
      "chores2 vacuum2"
  "(max-width: 900px)":
    grid-template-columns: 100%
    grid-template-areas: |
      "chores1"
      "chores2"
      "vacuum1"
      "vacuum2"

Only the first one is triggered in this case.

thomasloven · March 19, 2021, 3:13pm

Yes. Only the first match will be applied.

Chaps · March 19, 2021, 3:17pm

This example previously showed the two cards on top of each other :

type: 'custom:layout-card'
layout_type: grid
layout_options:
  grid-template-columns: 250px
  grid-template-rows: 250px
  grid-template-areas: |
    "graph"
cards:
  - type: sensor
    view-layout:
      grid-area: graph
    entity: sensor.sun_elevation
    graph: line
  - type: sensor
    view-layout:
      grid-area: graph
    entity: sensor.rasp_1_temperature
    graph: line
    style: |
      ha-card {
        background: none;
      }

The background for the ‘top’ card is set to none in order to see the second card which is ‘below’ it.
Now, all I get is the two cards on two separate lines, one after the other.

I hope the issue is clearer now

thomasloven · March 19, 2021, 3:18pm

view_layout, not view-layout.

Vlavonvidden · March 19, 2021, 3:22pm

Understood. Guess I’ll stick with state-switch for now.

thomasloven · March 19, 2021, 3:24pm

Or just switch the order of your queries, so that the one you want to be applied is first.
This is a feature.

Chaps · March 19, 2021, 3:25pm

Ahah, why is it always the obvious that is the most difficult to spot ?

Thanks for your quick answer !!

Vlavonvidden · March 19, 2021, 3:27pm

Oh dear here come the “I feel so stupid right now” feelings. Seriously though, this is an awesome update. My config is so much tidier now, thanks !

thomasloven · March 19, 2021, 3:30pm

Happens to the best of us.

mirekmal · March 20, 2021, 8:14am

@thomasloven Absolutely love this new version! I was using this card previously for few of my dashboards, but the problem was to build layouts that work equaly well on large screens (like in browser on PC) and on small one (like companion app on mobile). Now, with media query option I have full control over different size layouts and this is AWESOME! Thank you so much!

Ferador · March 21, 2021, 9:55am

Thanks, i solved it using the grid layout.

skank · March 21, 2021, 5:07pm

Hi, i’m going nuts here
I’ve been reading the readme over and over again
Updated to latest version and tried to adjust my yaml file so i get the same layout again without luck (i now i have to clear my cache)

This is my old code

title: Home
icon: mdi:home-outline
path: Home
type: 'custom:layout-card'
column_width: 100%
layout: horizontal
max_columns: 3
cards:
  - type: custom:stack-in-card
    mode: horizontal
    style: |
          ha-card {
            background-color: transparent !important;
            box-shadow: none !important;
          }
    cards:
      - type: markdown
        content: |
          <font size=4>{{ states.sensor.date_short.state }}</font>
        style: |
          ha-card {
            margin-top: 5px;
            background-color: rgba(0, 0, 0, 0);
            font-size: 100%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
             box-shadow: none;
             text-align: left;
           }
      - type: markdown
        content: |
          <font size=4>{{ states.sensor.temperature.state }}°C</font>
        style: |
          ha-card {
            margin-top: 5px;
            background-color: rgba(0, 0, 0, 0);
            font-size: 100%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
             box-shadow: none;
             text-align: right;
           }
  - type: 'custom:layout-card'
    layout: vertical
    max_columns: 3
    max_height: 96
    max_width: 400
    cards:
      - type: markdown
        content: |
          <font size=6>{{ states('sensor.greeting') }}</font>
        style: |
          ha-card {
            margin-top: 5px;
            background-color: rgba(0, 0, 0, 0);
            font-size: 100%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
             box-shadow: none;
             text-align: center;
           }
           h1, h3 {
             font-weight: 400 !important;
           }
      - type: custom:swipe-card
        parameters:
          allowTouchMove: true
          grabCursor: true
          autoplay:
            disableOnInteraction: false
        cards:
          !include ../../includes/notifications.yaml      
  - type: custom:layout-card
    column_width: 96
    layout: horizontal
    max_columns: 3
    max_height: 96
    max_width: 130
    cards:
      - type: custom:button-card
        entity: sensor.postbus
        state:
        - value: "closed"
          icon: mdi:mailbox
        - value: "open"
          icon: mdi:mailbox-up
          styles:
            icon:
              - color: var(--primary-color)
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
        tap_action:
          action: call-service
          service: homeassistant.turn_off
          service_data:
            entity_id: 
              - input_boolean.brievenbus
              - input_boolean.pakjesbus
      - name: Alarm
        type: custom:button-card
        tap_action: !include popup/alarm.yaml
        entity: alarm_control_panel.risco
        state:
        - value: "disarmed"
          icon: mdi:shield-off
        - value: "armed_away"
          icon: mdi:shield-check
          styles:
            icon:
              - color: var(--primary-color)
        - value: "armed_home"
          icon: mdi:shield-half-full
          styles:
            icon:
              - color: var(--primary-color) 
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
      - name: Garagepoort
        type: custom:button-card
        entity: binary_sensor.garage_poort
        state:
        - value: "on"
          icon: mdi:garage-open-variant
        - value: "off"
          icon: mdi:garage-variant 
          styles:
            icon:
              - color: var(--primary-text-color)
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
        tap_action:
          action: call-service
          service: homeassistant.toggle
          service_data:
            entity_id: switch.garagepoort 
      - entity: person.stijn
        type: picture-entity
        image: /local/stijn.jpg
        tap_action: !include popup/persoon1.yaml
        style: |
          ha-card {
            height: 96px !important;
          }
      - type: picture-entity
        entity: person.james
        image: /local/hond.jpg
        show_state: false
        tap_action: !include popup/dog.yaml
        style: |
          ha-card {
            height: 96px !important;
          }
      - type: picture-entity
        entity: person.kim
        image: /local/kim.jpg
        tap_action: !include popup/persoon2.yaml
        style: |
          ha-card {
            height: 96px !important;
          }
      - name: Verlichting
        type: custom:button-card
        icon: mdi:lightbulb-outline
        tap_action: !include popup/verlichting.yaml
        style: |
          ha-card {
            height: 96px;
          }
      - name: Security
        type: custom:button-card
        icon: mdi:cctv
        tap_action: !include popup/security.yaml
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
      - name: Entertainment
        type: custom:button-card
        icon: mdi:television-classic
        tap_action: !include popup/entertainment.yaml
        style: |
          ha-card {
            height: 96px;
            --paper-item-icon-active-color: #e79118;
          }
      - name: Huishouden
        type: custom:button-card
        icon: mdi:broom
        tap_action: !include popup/household.yaml
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
      - name: Temperatuur
        type: custom:button-card
        icon: mdi:home-thermometer-outline
        tap_action: !include popup/temperatuur.yaml
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }
      - name: Server
        type: custom:button-card
        icon: mdi:nas
        tap_action: !include popup/server.yaml
        style: |
          ha-card {
            height: 96px;
          }
      - name: Netwerk
        type: custom:button-card
        icon: mdi:server-network
        tap_action: !include popup/network.yaml
        style: |
          ha-card {
            height: 96px;
          }
      - name: Energie
        type: custom:button-card
        icon: mdi:power-plug
        tap_action: !include popup/energie.yaml
        style: |
          ha-card {
            height: 96px;
          }
      - name: Sensoren
        type: custom:button-card
        icon: mdi:leak
        tap_action: !include popup/sensoren.yaml
        style: |
          ha-card {
            height: 96px;
            text-align: center;
          }

Sorry its long
Do i have to change everything now into custom: layout-card and then layout_type: vertical (or horizontal) or do i need to change into type: custom:horizontal-layout

Any help appreciated

thomasloven · March 21, 2021, 5:27pm

That used to WORK???

I had no idea!

You want type: custom:horizontal-layout and then change the layout options.
… not that three columns that are each 100% wide makes any sense… but who am I to judge.

In general, I recommend starting over - as can be reasonably expected when switching to something named “2.0”.
You’ll probably have a better end result. Try the new GUI mode!

🔹 Layout-card - Take control of where your cards end up

FROM 2.2.0 THE CARD OPTION layout IS CALLED view_layout

FROM 2.2.0 THE CARD OPTION `layout` IS CALLED `view_layout`