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

gwww · June 19, 2020, 4:10am

I have created a layout card with 2 columns. I would like to set the background colour of the first column. Can that be done using card-mod? I have tried a couple of css paths, none of which have worked.

Examples I’ve tried:

        style: |
          ha-card {
            background: blue;
          }
          div#columns div.column.cards {background: green;}

EDIT:
I also tried custom:mod-card which turned column 1 background green (yeah!), but it also just rendered the entire layout in one column. What was supposed to be column two was directly under column 1. The background of “column 2” was not changed to green.

gwww · June 19, 2020, 6:56pm

Here is my config that breaks when I add in the mod-card to in theory add styling to the vertical stack. Without the mod-card added the panel renders correctly with two columns, one at 25% and the other (the homekit-panel) at 75%. With mod-card added it renders as a single column 25% wide.

    - type: custom:layout-card
      min_columns: 2
      max_columns: 2
      column_width: [25%, 75%]
      cards:
      - type: custom:mod-card
        card:
          type: vertical-stack
          cards:
          - type: markdown
            content: |
              {{states('sensor.time')}}
          - type: weather-forecast
            entity: weather.home
          - type: entities
            title: 1
            entities:
              - light.light_001

      - type: "custom:homekit-card"
        home: false
        title: "Demo"
        useBrightness: false
        titleColor: "#888"
        enableColumns: false
        statePositionTop: true
        entities:
        - title: Row 1
          entities:
          - entity: light.light_001
        - title: Row 2
          entities:
          - entity: light.light_001
          - entity: light.light_001

Ju5stMe · June 24, 2020, 8:56pm

Hi, I have installed this plugin through HACS. And added the resources in configuration.yaml.

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

resources:
  - url: /local/lovelace-layout-card/layout-card.js
    type: module

lovelace:
  mode: yaml

frontend:
  themes: !include_dir_merge_named themes
# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

As the picture shows. It does not load layout-card

Pictures added through link as I get an error trying to add them here.

thomasloven · June 25, 2020, 6:44am

When using hacs, you should use the path that hacs tells you to use.
Or better yet, have hacs handle installing the resource.

Ju5stMe · June 25, 2020, 7:12pm

THX

Just needed to reboot LOL.

/Ju5stme

heartkingz · June 27, 2020, 4:51pm

Allright so with version 14 my front-end breaks pretty much complete.
Used to have this in my front-end:

Which the corresponding code:

entities:
  - height: 80
    size: 20
    type: 'custom:gap-card'
type: 'custom:layout-card'

and:

cards:
  - cards:
      - color_type: icon
        entity: input_boolean.lights_livingroom
        icon: 'mdi:home-assistant'
        show_name: false
        tap_action:
          action: toggle
        template: living_room
        type: 'custom:button-card'
      - color_type: icon
        entity: input_boolean.lights_dining
        icon: 'mdi:silverware'
        show_name: false
        tap_action:
          action: toggle
        template: dining
        type: 'custom:button-card'
      - color_type: icon
        entity: input_boolean.lights_movietime
        icon: 'mdi:movie-roll'
        show_name: false
        tap_action:
          action: toggle
        template: movie
        type: 'custom:button-card'
    type: horizontal-stack
  - entities:
      - height: 20
        size: 20
        type: 'custom:gap-card'
    type: 'custom:layout-card'
  - current: true
    details: false
    entity: weather.buienradar
    forecast: true
    type: 'custom:weather-card'
mode: vertical
style: |
  ha-card {
    font-variant: small-caps;
    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'

Works perfectly in version 13. Am I doing something wrong?
When I install version 14 the front-end is completely blank.
When I go in editing mode, it looks like my cards are all gone.

Thanks for the help !

thomasloven · June 27, 2020, 9:40pm

You don’t need layout-card to use gap-card.

ricreis394 · June 27, 2020, 11:47pm

I’m using vertical mode with breaks. After the last update on my phone I see 2 columns on portrait mode, before only 1 column was seen. I’m using home assistant app on android

skank · June 28, 2020, 11:18am

Same here.
The last update (yesterday?) breaks almost all my pages…
I’m also using breaks.
Now i see strange columns…

What did change?
Is it cause of the grid change?

heartkingz · June 28, 2020, 2:12pm

Using gap-card as the type solves the issue. Thanks!

Before 0.111 this gap card on top of all the other Lovelace cards made everything go to the center of the screen. With 0.111 this is also broken.
Right now it looks like this…

Used to look like this:

Hope you can help me with this.

thomasloven · June 30, 2020, 8:21am

Please try release 16 for problems on narrow displays like phones.

ricreis394 · June 30, 2020, 8:37am

It’s working now, thanks!

skank · June 30, 2020, 11:53am

That fixes it for me too
Thx

sybux2000 · July 8, 2020, 4:43pm

Hello,
First thing, what a really perfect job !
Now the bad thing, I’m sorry, I think I’ve found a little issue with button-card and layout-card.
I’m loading my config in included files but if I change icon in the included files, it’s not changed on the interface. Only way to do this is to load it once on the main page and after I can remove it.

Main page

  - path: default_view
    title: Test
    panel: true
    cards:
      - type: custom:layout-card
        column-with: 100%
        layout: vertical
        column_num: 3
        cards:
          - !include /config/lovelace/301_computers.yaml
          - !include /config/lovelace/304_mobiles.yaml

Included page example

type: custom:layout-card
layout: horizontal
cards:
  - type: markdown
    style: |
      ha-card { box-shadow: none; height: 33px; background: none; }
      ha-markdown { padding: 16px 16px 0 8px !important; }
    content: |
      #### Mobile
  - type: custom:layout-card
    layout: horizontal
    column_num: 3
    cards:
      - !include
        - /config/lovelace/lovelace_gen_templates/system_sensor.yaml
        - entity: device_tracker.mobile
          name: mobile
          icon: mdi:test
      - !include
        - /config/lovelace/lovelace_gen_templates/system_sensor.yaml
        - entity: device_tracker.galaxy_a50
          name: mobile2
          icon: mdi:cellphone-android

When changing Icon in included file, nothing appens.
If I add for exemple once a time

- !include
            - /config/lovelace/lovelace_gen_templates/system_sensor.yaml
            - entity: device_tracker.srv
              name: Srv
              icon: mdi:air-conditioner

at the end of the main file, refresh page, remove those lines, after I can use mdi:air-conditioner

layout-card version 16
button-card version 3.3.6
HA version 0.112.2

thomasloven · July 8, 2020, 6:03pm

I think you’d find no matter what you change in the include files, the change won’t happen until you change anything at all in the main file.

That is, unless you click “Refresh” in the top right menu.

Because that’s how lovelace works.

sybux2000 · July 8, 2020, 8:38pm

You’re right, I’ve tested with the Reload Ressource but not with refresh.

Sorry for this

andykams · July 14, 2020, 1:18am

Hi Everyone.

I am new to the smart home journey hence please excuse my error in coding. I started with alt_smarthouse’s design. I am trying to achieve is 3 rows of cards with the vertical layout card but for some reason on my PC i only see 2 row as show below.

views:
- title: main
  icon: mdi:home-outline
  badges:
  - entity: binary_sensor.updater
  - entity: person.xxxx
  - entity: sun.sun
  cards:
  - type: 'custom:layout-card'
    column-with: 100%
    min_height: 100%
    layout: vertical
    max_columns: 4
##### weather card
    cards:
    - entity: weather.openweathermap
      number_of_forecasts: '5'
      name: Riverside
      type: 'custom:weather-card'

Here is the code for the Tesla cards

 ##### Tesla
  - type: horizontal-stack
    cards:
    - type: custom:mini-graph-card
      entities:
      - entity: sensor.verina_battery_sensor
        aggregate_func: max
        show_legend: false
        color: blue
      - entity: sensor.verina_battery_sensor
        show_legend: false
        aggregate_func: min
        color: '#5DADE2'      
      hours_to_show: 168    
      group_by: date  
      name: Verina Battery
      show:
        graph: bar
      color: blue

Could some one tell me what is it I am missing? I do not have errors from layout-card.

Thanks
Andy

thomasloven · July 14, 2020, 6:44pm

It’s hard to tell since you’re not showing all of it, but I’d guess this is an indentation problem.
I.e. the Tesla stack is not inside the layout-card, but in parallell with it.

andykams · July 15, 2020, 1:09am

Hi Thomas

Here is the entire code . Thank you for taking the time to look at it and writing the amazing blog on YAML basic.

Thanks
Andy

views:
#### Main page
- title: main
  icon: mdi:home-outline
  badges:
  - entity: binary_sensor.updater
  - entity: person.anand_kamdar
  - entity: sun.sun
  type: 'custom:layout-card'
  column-with: 100%
  min_height: 100%
  layout: vertical
  max_columns: 4
  cards:
  - type: 'custom:weather-card'
    entity: weather.openweathermap
    number_of_forecasts: '5'
    name: Riverside
### Scenes
  - cards:
    - color: 'rgba(3, 169, 244,1.0)'
      color_type: icon
      entity: scene.good_night
      icon: 'mdi:weather-night'
      lock:
        enabled: true
      tap_action:
        action: call-service
        service: scene.turn_on
        service_data:
          entity_id: entity
      type: 'custom:button-card'
    - action: call-service
      color: 'rgba(255, 224, 130,.9)'
      color_type: icon
      entity: scene.arrive_home
      icon: 'mdi:home-map-marker'
      lock:
        enabled: true
      service: scene.turn_on
      tap_action:
        action: call-service
        service: scene.turn_on
        service_data:
          entity_id: entity
      type: 'custom:button-card'
    - action: call-service
      color: 'rgba(159, 168, 218,.9)'
      color_type: icon
      entity: scene.leave_home
      icon: 'mdi:home-export-outline'
      lock:
        enabled: true
      service: scene.turn_on
      tap_action:
        action: call-service
        service: scene.turn_on
        service_data:
          entity_id: entity
      type: 'custom:button-card'
    type: horizontal-stack
#### Garage Buttons
  - cards:
    - color: '#C5E1A5'
      color_type: icon
      entity: cover.garage_door
      aspect_ratio: 2/1
      state:
      - icon: 'mdi:garage-open'
        value: open
      - icon: 'mdi:garage'
        value: closed
      - icon: 'mdi:garage-alert'
        operator: default
      tap_action:
        action: toggle
      lock:
        enabled: true
      type: 'custom:button-card'
    - color: '#C5E1A5'
      color_type: icon
      entity: switch.garage_light
      aspect_ratio: 2/1
      state:
      - icon: 'mdi:lightbulb-on'
        value: on
      - icon: 'mdi:lightbulb-off'
        value: off
      tap_action:
        action: toggle
      type: 'custom:button-card'
    style: |
      ha-card {
        margin: 10px;
        background: rgba(255,255,255,0.95)
      }
    type: horizontal-stack 
  ##### Tesla
  - cards:
    - type: custom:mini-graph-card
      entities:
      - entity: sensor.verina_battery_sensor
        aggregate_func: max
        show_legend: false
        color: blue
      - entity: sensor.verina_battery_sensor
        show_legend: false
        aggregate_func: min
        color: '#5DADE2'      
      hours_to_show: 168    
      group_by: date  
      name: Verina Battery
      show:
        graph: bar
      color: blue
    - type: custom:mini-graph-card
      entities:
       - sensor.verina_range_sensor
      name: Verina Range
    - type: custom:mini-graph-card
      entities:
       - sensor.verina_charging_rate_sensor
      tap_action:
        action: call-service
        service: scene.charge_verina
          #entity: switch.verina_charger_switch
      name: Verina Charging
    type: horizontal-stack
  type: vertical-stack
#### Page 2      
- title: main
  icon: mdi:weather-lightning-rainy
  cards:
    - type: thermostat
      entity: climate.downstairs_thermostat
    - type: thermostat
      entity: climate.upstairs_thermostat

thomasloven · July 15, 2020, 8:22pm

I see the problem now.

Shortening down everything a bit, you have:

views:
  - title: main
    type: custom:layout-card
    cards:
      - first card
      - second card
      - ...etc...

However, type is not an option of views, so that’s ignored.
Layout-card must be in your cards section.