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

kajmaj · March 22, 2021, 9:13am

Hi guys, is it possible to have a conditional number of columns (1-2-3), keeping the total width everytime 100%?
I mean 1 column 100%, 2 columns 50% each, 3 columns 33% each?
Each column = 1 card (entities)

Vlavonvidden · March 22, 2021, 11:04am

Use grid-template-columns: to define your width, with fr in order not to mess-up margins (my css is rusty though).

For example :

# lovelace_gen
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 5%
grid-template-areas: |
  "header1 header2 header3 header4"

Will give you 4 columns at 25% width each. If you want the number of columns to change, you can use mediaqueries or state-switch which should be more than enough for most cases.

thomasloven · March 22, 2021, 12:07pm

A horizontal layout with a very high max_width would probably work.

skank · March 22, 2021, 12:18pm

@thomasloven can you help me?
I tried now with this, all comes back but my buttons arent placed horizontally, they show vertical although horizontal is asked (yes cleared cache, even used breaks …)[code]
title: Home
icon: mdi:home-outline
path: Home
type: custom:layout-card
layout_type: vertical
layout_options:
max_cols: 3
cards:

type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
cards:
- type: markdown
  content: |
  {{ states.sensor.date_short.state }}
  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: |
  {{ states.sensor.temperature.state }}°C
  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_type: vertical
layout_options:
max_cols: 3
cards:
- type: markdown
  content: |
  {{ states(‘sensor.greeting’) }}
  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
layout_type: horizontal
layout_options:
max_cols: 3
max_height: 96
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;
  }
  [/code]

kajmaj · March 22, 2021, 12:50pm

I am lost a bit. What should I understand under very high max_width?

thomasloven · March 22, 2021, 1:31pm

A high max_width will let the columns get very wide, such that they can cover 100, 50 or 33 % of the screen.

kajmaj · March 22, 2021, 1:36pm

OK. Thanks. I will try.
But must update layout-card first

paddy0174 · March 22, 2021, 1:38pm

Would you mind reading this post and act accordingly? That would be very pleasant. And btw. it is not a good tone, to mark someone with an @ if you just want to ask for help. That’s what this (or other threads) are for, or do just want him and not others to help?

maxalbani · March 22, 2021, 5:41pm

Hi guys,
what is the easiest way to adapt this code with the new grid layout?

type: 'custom:layout-card'
layout: horizontal
column_num: 2
column_width:
  - 70%
  - 30%
cards:

Thanks!

sebyldino · March 23, 2021, 7:50am

Hello,

I had configured my dashboard to look like this:

Yesterday i Updated layout-card plugin and now my dashboard look like this:

Is it due to the addition of resposive function? How can I fix this?

Thank you

thomasloven · March 23, 2021, 7:58am

Updated from which version?

sebyldino · March 23, 2021, 8:06am

V2.2.2 and this morning 2.2.3

thomasloven · March 23, 2021, 8:14am

That’s very odd since 2.2.3 was actually tagged wrong and exactly the same as 2.2.2…
What kind of layout do you use, and what does your setup look like in general?

Lovefall · March 23, 2021, 10:27am

Hi Thomas,
Can I control the row height in a card?
/Niklas

sebyldino · March 23, 2021, 11:40am

I don’t quite understand the meaning of your question. Here is the configuration of the card that I use.

type: 'custom:layout-card'
layout: grid
column_width: 90%
gridrows: 130px 130px 520px 130px 70px 70px 100px 100px 100px
gridcols: 4px 260px 160px 100px
cards:
  - type: button
    entity: alarm_control_panel.alarm_mqtt
    show_name: false
    icon_height: 50px
    gridrow: 1 / 2
    gridcol: 2/3
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: more-info
        entity: cover.volet2
        icon: 'mdi:window-shutter'
        name: RDC
        hold_action:
          action: none
      - type: button
        tap_action:
          action: more-info
        entity: cover.volet
        icon: 'mdi:window-shutter'
        name: R+1
        hold_action:
          action: none
    gridcol: 2/3
    gridrow: 2/3
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.portail_2
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.porte_de_garage
        show_name: false
    gridcol: 3/5
    gridrow: 1/2
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.toutes_les_lumieres
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.serrure_entree_2
        show_name: false
    gridcol: 3/5
    gridrow: 2/3
  - type: entities
    entities:
      - entity: light.cuisine
        type: 'custom:slider-entity-row'
      - entity: light.spot_cuisine
        type: 'custom:slider-entity-row'
      - entity: light.sejour
        type: 'custom:slider-entity-row'
      - entity: light.salon
        type: 'custom:slider-entity-row'
      - entity: light.lampes_salon
        icon: 'mdi:floor-lamp-variant'
        type: 'custom:slider-entity-row'
      - entity: light.pallier
        type: 'custom:slider-entity-row'
      - entity: light.mur_pierre
      - entity: light.facade
        name: Maison
      - entity: light.dimmable_light_3
        name: Atelier
      - entity: light.dimmable_light_2
        name: Atelier
    show_header_toggle: false
    gridrow: 3 / 4
    gridcol: 2 / 5
  - type: glance
    entities:
      - entity: sensor.tdeg_moyenne_rdc_temperature
      - entity: sensor.humidite_moyenne_rdc
      - entity: sensor.tdeg_moyenne_etage_temperature
      - entity: sensor.humidite_moyenne_etage
    gridcol: 2/5
    gridrow: 4/5
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.poubelles_2
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: switch.camera
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: toggle
        entity: switch.invite
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.vancances
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: binary_sensor.tous_les_capteurs_d_ouverture
        show_name: false
      - type: button
        entity: switch.alarme_batterie_voyant
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('switch.alarme_batterie_voyant', 'on') %} red {% endif %};
          }
        tap_action:
          action: navigate
          navigation_path: /lovelace/batterie
    gridcol: 2/5
    gridrow: 5/6
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.thermostat_atelier_on_off
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.detecteur_fumee_rdc_et_etage_2
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.detecteur_fumee_rdc_et_etage_2', 'on') %} red {% endif %};
          }
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.detecteur_fumee_rdc_et_etage
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.detecteur_fumee_rdc_et_etage', 'on') %} red {% endif %};
          }
      - type: button
        tap_action:
          action: toggle
        entity: switch.aquarium
        show_name: false
      - type: button
        tap_action:
          action: none
        entity: switch.xbox
        show_name: false
      - type: button
        show_name: false
        entity: binary_sensor.capteur_d_eau_baignoire
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.capteur_d_eau_baignoire', 'on') %} red {% endif %};
          }
        icon_height: 50px
        tap_action:
          action: none
    gridcol: 2/5
    gridrow: 6/7
  - type: thermostat
    entity: climate.thermostat_atelier_2
    gridcol: 2/4
    gridrow: 7/10
  - type: button
    entity: light.dimmable_light_4
    tap_action:
      action: none
    show_name: false
    gridrow: 7/8
    gridcol: 4/5
  - type: button
    entity: switch.smart_plug_6
    show_name: false
    tap_action:
      action: none
    gridcol: 4/5
    gridrow: 8/9
  - type: button
    entity: light.dimmable_light_8
    show_name: false
    gridcol: 4/5
    gridrow: 9/10
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_download
    icon: 'mdi:cloud-download'
    line_color: greenyellow
    show:
      name: false
      header: false
      icon: false
      fill: fade
    font_size: 80
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 2/3
    gridrow: 10/11
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_upload
    icon: 'mdi:cloud-upload'
    font_size: 80
    line_color: cyan
    show:
      name: false
      header: false
      icon: false
      fill: fade
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 3/5
    gridrow: 10/11
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_ping
    icon: 'mdi:cloud-refresh'
    font_size: 80
    line_color: deeppink
    show:
      name: false
      header: false
      icon: false
      fill: fade
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 2/5
    gridrow: 11/12

thomasloven · March 23, 2021, 12:08pm

Ok, you have some problems on lines 2, 3, 4, 5, 11, 12, 31, 32, 45, 46, 59, 60, 84, 85, 92, 93, 135, 136, 186, 187, 190, 191, 197, 198, 204, 205, 209, 210, 226, 227, 243, 244, 260 and 261.
I.e. parameters that are not supported since version 2.0.

I suggest using HACS for installing lovelace plugins. Then you would have seen something like this when trying to update:

and have been allerted about things having changed.

sebyldino · March 23, 2021, 12:59pm

Ok. Is it possible to downgrade to previous release before 2.0?

thomasloven · March 23, 2021, 1:05pm

Yes. There’s a setting in HACS how many previous versions to show, and when that it high enough you can select to instal release 16.

If you’re not using HACS, just download and install this: https://github.com/thomasloven/lovelace-layout-card/releases/tag/16

Lovefall · March 23, 2021, 3:26pm

To clarify what I mean:
Look at @sebyldino’s card, can I have the rows with cuisine, spot cuisine etc. tighter, less space between the each row?
/Niklas

thomasloven · March 23, 2021, 7:10pm

People really should at least scroll through the guide linked from the readme…

At least look at the pictures.