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

[thomasloven (Thomas Lovén)]

I think that’s only possible if you stack layout-cards, i.e.:

type: custom:layout-card
layout: vertical
cards:
  - type: custom:layout-card
    layout: horizontal
    cards:
      - card 1
      - card 2
  - type: custom:layout-card
    layout: horizontal
    cards:
      - card A
      - card B
      - card C

I guess from your deleted post that you realized what rtl stands for, btw?

[NDCallahan (Nate)]

Ha. Yes! Found out what rtl was standing for. Felt silly once i figured it out. haha. I will give the stacked layout-cards a try to see if that helps me out.

[NDCallahan (Nate)]

@thomasloven , how do the card_options: work? Do you have documentation on the use of that? I haven’t been able to find that yet.

[thomasloven (Thomas Lovén)]

card_options are applied to all cards, e.g:

type: custom:layout-card
cards:
  - type: entities
    show_header_toggle: false
    ...
  - type: entities
    show_header_toggle: false
    ...

is equivalent to

type: custom:layout_card
card_options:
  show_header_toggle: false
cards:
  - type: entities
    ...
  - type: entities
    ...

[NDCallahan (Nate)]

Great! I was kind of thinking so, but I wasn’t sure.

One thing I can see being super beneficial would be to enable the grid system to work responsively. I like how i can span cards, but they end up being static. Maybe it’s not a bit deal and I will just have to live with having a “big button” with two other columns next to it, but it would be nice to be able to shrink columns and the others become responsive and slide over.

For now, I’m going to continue trying to make this work.

[eggman (bertie basset)]

I use grid quite a bit, but I have to say - it’s not the best for truly responsive layouts. Nor can I see how it could be, it’s all about placing things exactly where you want - kind of the opposite to responsive.

I use separate dashboards for portrait and landscape, layout cards to control layout and !include for individual ‘cards’ that I reuse between views. I also use lovelace_gen to further reuse ‘cards’ with different parameters.

My ‘cards’ are usually yaml files with embedded layout cards or stack-in-cards with several lovelace cards, controlled by lovelace_gen variables.

A couple of examples here:

Views vs Dashboards - What am I missing?

@tom_l, yes I was under the same impression @eggman, that’s eggsactly (pun intended) what I’m after and what I tried to create. I’m fine with the includes (either at card or view level) but the structures between I just don’t have a handle on. I came to lovelace near its early implementation and so always just coded everything in yaml by hand, so I don’t know about ‘auto generated’ or ‘gui editor’ views Do you have a git-hub repo or can you share a basic structure - configuration.yaml - dash…

[NDCallahan (Nate)]

Totally understand where the “repsonsive” grid may not be the best use case there. I’m thinking of it from a bootstrap outlook in a home assistant way.

The biggest thing I’m struggling with now is if I have two columns in row 1, three columns in row 2. column 1 in row 2 maybe isn’t as wide as column 2 and three are. if i do that currently, I have to have a big gap between col 1 and col 2 and it just looks odd.

[eggman (bertie basset)]

Im having trouble visualising the problem, do you have screenshot and code of it looking wrong?

[tpx01]

Is it possible to have something implemented like a “break” on the horizontal layout @thomasloven?

[NDCallahan (Nate)]

Again, i’m not sure what I"m trying to accomplish is actually achievable without utilizing the grid layout. The only downfall to using the grid layout is responsiveness for me.

Here’s a screenshot where I’m trying a dashboard for my tablet. The problem is I didn’t want a huge button and was trying to get it where my weather card and perhaps the camera columns would “adjust” and move left where the column ends on the button-card.

type: 'custom:layout-card'
layout: vertical
max_width:
  - 100%
  - 50px
cards:
  - type: 'custom:layout-card'
    layout: vertical
    column_width: 100%
    cards:
      - type: markdown
        content: |
          # Cal-Ped Home
  - type: 'custom:layout-card'
    layout: vertical
    column_width: 50%
    cards:
      - type: markdown
        content: |
          # 12:00:00 AM
      - break
      - entities:
          - entity: sensor.average_inside_temperature
            icon: 'mdi:thermometer'
            name: Indoor Temperature
          - entity: sensor.wupws_temp
            name: Outdoor Temperature
          - entity: sun.sun
            name: Sun
        show_header_toggle: false
        show_name: true
        show_state: true
        style: 'ha-card { height: 100%; }'
        type: glance
        column_width: 100
        max_width: 100%
  - type: 'custom:layout-card'
    layout: horizontal
    column_width: 33.3333%
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        column_width: 75%
        justify_content: left
        cards:
          - type: button
            icon: 'mdi:menu'
            name: Home Navigation
            style: 'ha-card { height: 100%; }'
            tap_action:
              action: navigate
              navigation_path: /lovelace-nate-development/tablet-home
      - type: weather-forecast
        entity: weather.kmci
        style: 'ha-card { height: 100%; }'
      - type: picture-entity
        entity: camera.front_door
        show_state: false
        camera_view: live
        aspect_ratio: 16x9

[genik]

good day

When using the layout card, I have the following problem: if I open the
input-select and the selection consists of a long menu that goes beyond the screen, then the screen starts twitching. This can be seen in the attached video.
And without a layout card, there is no defect.
Can this be fixed?

the screen twitching problem

[Honza]

having some scaling issues with layout-card. It seems to stretch the height and width of cards ignoring the direct configuration.

here is the complete card as an example, the second button card is no longer 36px high:

---
id: test3
title: TEST3
icon: mdi:test-tube
panel: true
path: test3
cards:

  - type: custom:layout-card
    layout: vertical
    max_width: [100%]
    cards:
      
      - type: horizontal-stack
        cards:
          - type: "custom:button-card"
            color_type: label-card
            name: Alarm Panel2
            #aspect_ratio: 4/1
            styles:
              card:
                - height: 36px
                - width: 400px

          - type: "custom:button-card"
            #color_type: label-card
            name: Alarm Panel3
            styles:
              card:
                - height: 36px
                #- width: auto
                #- width: 400px

[skank]

i’m using this in combination with a custom upcoming media card

cards: 
  - type: custom:layout-card
    layout: vertical
    min_columns: 1
    max_columns: 3
    cards:
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_films
        title: Laatste Films
        image_style: fanart
        line1_text: '$release'
        line2_text: '$genres'
        line3_text: '$rating - $runtime'
        line4_text: '$studio'
        title_size: medium
        line_size: small

However, the upcoming card uses too much space.
Can i fix this with the layout card?

Does max_height work? or is it only for width? or grid-rows?

[edersong (Ederson Santos)]

Hi folks,
The instructions says to configure resource url to ‘/local/layout-card.js’ but the HACS automatically registered it as ‘/hacsfiles/lovelace-layout-card/layout-card.js’ and the layout-card.js is located at ‘/config/www/lovelace-layout-card/layout-card.js’
My problem is that the layout-card is not working and its reporting the following: Custom element doesn’t exist: layout-card
How I can configure it correctly at resources?

Thank you in advance, Ederson Santos

[thomasloven (Thomas Lovén)]

@edersong

The instructions says to…

The instructions says to see this guide.

[mirekmal (Mirek Malinowski)]

I feel stupid, but I just can’t get it to work… Even simple copy/paste of one of very first cases from this post does not work for me… I set up new view just for testing, made it panel view, added within this view just one layout-card and here is the code I use:

type: 'custom:layout-card'
layout: vertical
column_width: 100%
max_columns: 3
max_width: 250px
cards:
  - type: markdown
    content: Dummy 1
  - break
  - type: markdown
    content: Dummy 2
  - break
  - type: markdown
    content: Dummy 3
  - break
  - type: markdown
    content: Dummy 4
  - break
  - type: markdown
    content: Dummy 5
  - break
  - type: markdown
    content: Dummy 6
  - break

The only difference to sample code from previous posts is that I added column width, to show how much space is available for additional columns. Here is the result:

Whatever I try to do I end up with single column. I tried auto and horizontal layout - the same result. The only option that seems to help is to add min_columns and the number of displayed colums increaes to specified number, but again is not dynamic (it does not increase to 3 when enough space or not reduce to 1 in very narrow window.I’m on the latest version of card (just installed from HACS) and HA (0.109.6). Please help!

[thomasloven (Thomas Lovén)]

The readme says:

Since layout-card is a card in it self its area of effect will be limited to the width of a card, and thus you will (almost) always want to use it in panel mode:

views:
  - title: My view
    panel: true
    cards:
     - type: custom:layout-card
       ...

[mirekmal (Mirek Malinowski)]

@thomasloven, yes, I know… I use panel mode! Here is the full code from Raw Editor:

preload_cards:
  - markdown
  - gauge
  - stack-in-car
  - bar-card
  - mini-graph-card
preload_rows:
  - divider
views:
  - badges: []
    cards:
      - cards:
          - content: Dummy 1
            type: markdown
          - content: Dummy 2
            type: markdown
          - content: Dummy 3
            type: markdown
          - content: Dummy 4
            type: markdown
          - content: Dummy 5
            type: markdown
          - content: Dummy 6
            type: markdown
        column_width: 100%
        layout: horizontal
        max_columns: 5
        max_width: 250px
        min_columns: 1
        type: 'custom:layout-card'
    panel: true
    path: esxi
    title: ESXi

If I remove max_width parameter it will look like this:

[reste_narquois (Chris Warne)]

In your last code example, I can’t see any

- break

between the markdown cards to start a new column (although they were in your first example, so maybe it’s not the issue)

[mirekmal (Mirek Malinowski)]

Yeah… I was playing with code in meantime… breaks were in the original post, in the one I pasted in second one I removed them, but in recent one I also changed layout to horizontal (BTW tested auto too)… but it didn’t helped either.

It makes me thinking if there is something fundamentally wrong with my installation/configuration. I started to play with layout-card, because I faced this very issue in my other views, where cards were not properly ordered, but aligned into single column. Though I linked it to use of custom stack cards, that apparently have issues with calculation of dimentions (as I read in some other post). So I wanted to force proper layout by moving my config to layout-card, but faced exaclty the same problem already during the test, without even moving more complex configurations into. So perhaps it is sort of ‘global’ problem for me…