#311

A horizontal layout with a very highmax_width可能会起作用。

#312

@thomaslovencan you help me?
我现在尝试了这一点，所有这些都回来了，但是我的按钮水平放置在水平上，尽管询问了水平，但它们显示垂直（是的，已清除缓存，甚至使用过断路……）[代码]
title: Home
icon: mdi:home-outline
路径：家
type: custom:layout-card
layout_type: vertical
layout_options:
max_cols: 3
cards:

  • type: custom:stack-in-card
    模式：水平
    样式：|
    ha-card {
    background-color: transparent !important;
    盒子阴影：无！重要；
    }
    cards:
    • type: markdown
      content: |
      {{ states.sensor.date_short.state }}
      样式：|
      ha-card {
      保证金顶：5px;
      background-color: rgba(0, 0, 0, 0);
      font-size: 100%;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      文本合格：左；
      }
    • type: markdown
      content: |
      {{ states.sensor.temperature.state }}°C
      样式：|
      ha-card {
      保证金顶：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’) }}
      样式：|
      ha-card {
      保证金顶：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 {
      字体重量：400！重要；
      }
    • type: custom:swipe-card
      parameters:
      AllowTouchMove：是的
      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:
        - 颜色：var（ - 主要色）
        样式：|
        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:
        - 颜色：var（ - 主要色）
      • 价值：“ Armed_home”
        icon: mdi:shield-half-full
        styles:
        icon:
        - 颜色：var（ - 主要色）
        样式：|
        ha-card {
        height: 96px;
        text-align: center;
        }
    • name: Garagepoort
      type: custom:button-card
      实体：binary_sensor.garage_poort
      state:
      • value: “on”
        icon: mdi:garage-open-variant
      • value: “off”
        icon: mdi:garage-variant
        styles:
        icon:
        - 颜色：var（ - 主要文本彩色）
        样式：|
        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
      样式：|
      ha-card {
      height: 96px !important;
      }
    • type: picture-entity
      entity: person.james
      图片： /local/hond.jpg
      show_state: false
      tap_action: !include popup/dog.yaml
      样式：|
      ha-card {
      height: 96px !important;
      }
    • type: picture-entity
      entity: person.kim
      图片： /local/kim.jpg
      tap_action: !include popup/persoon2.yaml
      样式：|
      ha-card {
      height: 96px !important;
      }
    • name: Verlichting
      type: custom:button-card
      icon: mdi:lightbulb-outline
      tap_action: !include popup/verlichting.yaml
      样式：|
      ha-card {
      height: 96px;
      }
    • name: Security
      type: custom:button-card
      icon: mdi:cctv
      tap_action: !include popup/security.yaml
      样式：|
      ha-card {
      height: 96px;
      text-align: center;
      }
    • name: Entertainment
      type: custom:button-card
      icon: mdi:television-classic
      tap_action：！包括弹出/娱乐.yaml
      样式：|
      ha-card {
      height: 96px;
      –paper-item-icon-active-color:#e79118;
      }
    • 名称：Huishouden
      type: custom:button-card
      图标：MDI：扫帚
      tap_action: !include popup/household.yaml
      样式：|
      ha-card {
      height: 96px;
      text-align: center;
      }
    • name: Temperatuur
      type: custom:button-card
      icon: mdi:home-thermometer-outline
      tap_action: !include popup/temperatuur.yaml
      样式：|
      ha-card {
      height: 96px;
      text-align: center;
      }
    • 名称：服务器
      type: custom:button-card
      icon: mdi:nas
      tap_action: !include popup/server.yaml
      样式：|
      ha-card {
      height: 96px;
      }
    • 名称：Netwerk
      type: custom:button-card
      icon: mdi:server-network
      tap_action: !include popup/network.yaml
      样式：|
      ha-card {
      height: 96px;
      }
    • name: Energie
      type: custom:button-card
      图标：MDI：动力插头
      tap_action: !include popup/energie.yaml
      样式：|
      ha-card {
      height: 96px;
      }
    • 姓名：传感器
      type: custom:button-card
      icon: mdi:leak
      tap_action: !include popup/sensoren.yaml
      样式：|
      ha-card {
      height: 96px;
      text-align: center;
      }
      [/code]
#313

我迷路了。我应该在很高的情况下了解什么max_width?

#314

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

#315

好的。谢谢。我会尝试。
但是必须先更新布局卡:face_with_monocle:

#316

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?：眨眼：

#317

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!

#318

Hello,

I had configured my dashboard to look like this:

Home ihpone
Home ihpone 1170×3771 363 KB

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

IMG_0351.PNG
IMG_0351.PNG 1170×2532 387 KB

是由于添加了呼吸功能吗？我怎样才能解决这个问题？

Thank you

#319

Updated from which version?

#320

v2.2.2和今天早上2.2.3

1喜欢
#321

这非常奇怪，因为2.2.3实际上被标记了错误，并且与2.2.2…完全相同。
What kind of layout do you use, and what does your setup look like in general?

#322

嗨，托马斯，
我可以控制卡中的行高度吗？
/尼克拉斯

#323

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: 50pxGridrow：1 /2 Gridcol：2/3-类型：水平堆栈卡片： - 类型：button tap_action：action：more-info entity：cover.volet2 iCON：'mdi：'mdi：window shutter'name：rdc hold_action：rdc hold_action：动作：动作：动作：无 - 键入：button tap_action：操作：more -info实体：cover.volet图标：'mdi：窗口shutter'名称：r+1 hold_action：动作：无gridcol：2/3 gridrow：2/3 gridrow：2/3-类型：水平：水平-STACK卡： - 类型：按钮TAP_ACTION：操作：tocgle entity：switch.portail_2 show_name：false-类型：button tap_action：take：tocy：tocegle entity：switch.porte_de_garage show_name：false gridcol：false gridcol：3/5 gridrow：1/2-类型 - 类型 - 类型：水平堆栈卡片： - 类型：按钮TAP_ACTION：操作：切换实体：light.toutes_les_lumieres show_name：false-类型：button tap_action：tap_action：action：contion：tocegle entity：toggle entity：toggle entity：switch.serrure_entree_2 show_name：false gridcol：3/5 gridrow：2/3-类型：实体实体： -  entity：light.cuisine类型：'custom：slider -entity -row' -  slider -entity -row' -  spot.spot.cot_cuisine类型slider-entity-row' - 实体：light.sejour类型：'自定义：slider-entity-row' -  entity：light.salon类型：'自定义：slider-entity-row' -  entity：light.lampes_salon iCon：'mdi：落地灯 - 变种'类型：'自定义：slider-entity-row' - 实体：light.pallier类型：'自定义：slider-entity-row' -  entity：light.mur_pierre- entity-实体：light.facade。- 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 -实体：sensor.tdeg_moyenne_etage_temperature-实体：sensor.humidite_moyenne_etage gridcol：2/5 gridrow：4/5-类型 - 类型：Horizo​​ntal -stack cards： - 类型： - 类型：button tap_action：button tap_action：tablecation：tapection：take：cation：tocy：tocegle：tocegle entity：switch.pou.pou.pou.pou.pou.pou.pou.pou.pou.pou.pou.pou.pou.pou.pouBELLES_2 show_name：false Hold_Action：action：andy-类型：button tap_action：action：action：note entity：switch.camera show_name：false hold_action_action：action：action：note -t​​ype：button tap_action：button tap_action：action：tocy eaction：tocegle entity：switch.invite show_name：false-类型 - 类型 - 类型 - 类型 - 键入：button tap_action：操作：tocgle entity：switch.vancances show_name：false-类型：button tap_action：action：tocegle entity：biinary_sensor.tous_les_les_capteurs_capteurs_d_ouverture show_name：false-类型：button：button entity：switch.alarme_batterie_voyant show_name：show_name：falses：falses：| | | | | | | | | | | | | | | | | | | | | | | 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
#324

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:

image
image 808×500 19.1 KB

and have been allerted about things having changed.

#325

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

#326

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

#327

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?
/尼克拉斯

#328

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

At least look at the pictures.

1喜欢
#329

It works thank you!

#330

I am considering update, but hesitating to do it as I am not sure how to solve transition (modification of lovelace yaml)
就我而言，我有关注，我想保留它。

- type: custom:layout-card layout: vertical column_num: 8 column_width: 100% cards: - type: custom:layout-card layout: horizontal column_width: [12.5%, auto, 12.5%, 12.5%] column_num: 4 cards:

导致：

home_tab_layout
home_tab_layout 1478×342 64.3 KB

Should I use masonry, horizontal or play with a grid layout?