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

thomasloven · February 11, 2020, 6:54pm

I don’t quite understand.
You’ve carefully made sure it will always put your cards in exactly four columns, in the way described in the readme.

The readme also 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:

so that explains exactly what you’re seeing.

There’s also descriptions and examples on how to set the maximum width of the columns within the layout card.

What’s your question, really?

devastator · February 11, 2020, 9:18pm

It displays perfectly on my phone (everything vertical), but it shows terrible on a desktop (everything vertical). I want something that will fill up the horizontal space on large displays (if at all possible …)

eggman · February 11, 2020, 9:32pm

You’ve started with a vertical stack, it’s that card you’ve made take up the panel, not the layout card. So all you’re going to get is the contents of that vertical stack.

Panel

Setting panel true sets the view to panel mode. In this mode the first card is rendered full-width, other cards in the view will not be rendered. This mode is good when using cards like map , stack or picture-elements . Note that badges will not appear in Panel Mode.

https://www.home-assistant.io/lovelace/views/#panel

Put your custom layout card first, let it control the layout. I think you want it in vertical mode then use breaks where you’d like the new columns to start. That’ll give you everything in one vertical on your phone and as many as you specify on your desktop.

thomasloven · February 11, 2020, 9:41pm

Isn’t that exactly what your second screenshot shows?

thomasloven · February 11, 2020, 9:41pm

Since the layout card is inside the stack it should be fine.

devastator · February 11, 2020, 9:44pm

For mobile it is fine, for desktop i’d want it to be horizontal when scrollbars would be needed:

thomasloven · February 11, 2020, 9:47pm

That’s not how the vertical stack works.
It will put your first layout card under the second one. Stacked vertically. It you want that to work, you’ll have to replace that with a layout-card.

devastator · February 11, 2020, 10:05pm

Ow, i thaught it was ok because i’ve put the other cards in the vertical cards. My understanding was that the vertical layout would only apply to the cards that are defined within it ?

I mean, I have the ‘root-card’. That root-card contains multiple ‘vertical stack cards’. Those can contain a custom layout.

devastator · February 11, 2020, 10:14pm

Thx, But of course i don’t know where to put the breaks, it depends on the device on which it is displayed …

shauder · February 12, 2020, 12:56am

I am using a layout-card as the first card and am trying to do the same thing devastator is wanting: https://github.com/thomasloven/lovelace-layout-card/issues/51

Do you think my problem is related to using lovelace_gen?

Is there a way to view the generated YAML and try using that?

devastator · February 12, 2020, 12:27pm

I get it somewhat working like this:

# lovelace_gen

title: Verlichting
icon: mdi:lightbulb
panel: true

cards:
  # Repeat several times
  - type: custom:layout-card
    cards:
      - type: vertical-stack
        cards:
          ...

      - type: vertical-stack
        cards:
          ...

But then it will try to fill up horizontally first. If i set the layout of the custom-layout to vertical, it will go vertical but will never add columns if not everything can be show vertically without scrollbars.

Is there a way to go vertically as long as no scrollbars are needed, and then go horizontally ?

EDIT: when i load the page, everything is vertical. If I resize the window a bit, it jumps to columns (ok !). If I hit refresh, it is single column again.

shauder · February 12, 2020, 6:34pm

This is the same issue I have in the github issue I linked

ricreis394 · February 12, 2020, 11:28pm

I’m trying to use the grid feature, I want to have 3 rows and 3 cols. and in the middle to be relative size.

this is what I achieved, but I suppose that the orange and the red card should be bigger, to fit the center of the screen, right?

This is my code:

- title: WP
  panel: true
  path: wallpanel
  cards:
    - type: custom:layout-card
      layout: vertical
      column_width: 100%
      cards:
        - type: 'custom:layout-card'
          layout: grid
          gridrows: 75px auto 75px
          gridcols: 120px auto 120px
          cards:
            - type: markdown
              content: >
                00:15
              style: "ha-card { background-color: blue; height: 100% !important; }"
              entities:
                - sun.sun
              gridrow: 1 / 2
              gridcol: 1 / 2
            - type: glance
              style: "ha-card { background-color: red; height: 100% !important; }"
              entities:
                - sun.sun
              gridrow: 2 / 3
              gridcol: 1 / 2
            - type: glance
              style: "ha-card { background-color: orange; height: 100% !important;  }"
              entities:
                - sun.sun
              gridrow: 2 / 3
              gridcol: 2 / 4

jimz011 · February 16, 2020, 12:12am

Hi @thomasloven I love this addon but I am wondering something. I have 8 buttons in layout card. They all are state switches as I wanted them to be toggled if I want to show the button or not. The problem is, if I turn one off it will move the button up vertically in the layout. Would it be possible (if it even is possible) to have the button moved horizontally?

Ondra_Barina · February 16, 2020, 6:19pm

Hi, I have same problem as there: 🔹 Layout-card - Take control of where your cards end up
Only difference is that I can switch views and it works fine but when I refresh lovelace it goes back to one column and I have to refresh page, on mobile always one column.

I guess that i have the last version, downloaded it just today from your git, so could you help me please ?

ricreis394 · February 17, 2020, 9:57pm

@thomasloven any idea about this? Or there is anything I can do to make it work? any suggestion?

AndroVet · February 28, 2020, 3:48am

As soon as “%%” appears in the code, problems immediately arise … I found a “little crutch”. Look here: my solution

bacco007 · February 28, 2020, 9:15am

I’ve been playing with the grid layout and have come across something I cant seem to control - the gap on the first card is larger then the gap for the second card (Screenshots 1 & 2)

Looking at the generated style (Screenshot 3) there is a style setting for the first card to have a larger top margin - i’ve tried to remove through the style option without success

YAML Sample at the bottom

Screen Shot 2020-02-28 at 20.11.09

cards:
    - type: custom:layout-card
      layout: grid
      gridrows: 180px 200px auto
      gridcols: 200px auto 200px
      cards:
        - type: entities
          entities:
            - sun.sun
          gridrow: 1 / 4
          gridcol: 1 / 2
          style: 'ha-card { height: 100%; }'
        - type: entities
          entities: &ents
            - light.lamp
          gridrow: 1 / 3
          gridcol: 2 / 4
          style: 'ha-card { height: 100%; }'
        - type: markdown
          content: test
          gridrow: 4 / 5
          gridcol: 1 / 2
          style: 'ha-card { height: 100%; }'
        - type: entities
          entities: *ents
          gridrow: 3 / 4
          gridcol: 2 / 3

hentes · March 9, 2020, 7:59am

For 2 days I’m struggling to get it done a lovelace page but without success. Basically I want to put 6 icons side by side if viewing on a pc or a tablet and all icons under each other on mobile phone. The pc and the mobile view works fine but not on the tablet.
This is my code. Two perfectly identical custom layout-cards. The first one aligns the content correctly the second one doesn’t. Why?

  - badges: []
    title: Test
    icon: mdi:cloud-check-outline
    panel: true
    cards:
      - type: custom:layout-card
        max_width: 100%
        layout: horizontal
        cards:
          - type: custom:layout-card
            layout: horizontal
            cards:
              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

          - type: custom:layout-card
            layout: horizontal
            cards:
              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

              - type: vertical-stack
                cards:
                  - type: "custom:button-card"
                    color_type: card
                    entity: sensor.idojaras_ikon
                    icon: mdi:cloud-check-outline
                    show_name: false
                    show_state: false
                    size: 90%
                    show_label: false
                    styles:
                      card:
                        - background: rgba(0,0,0,0)
                        - box-shadow: none
                        - border: none

I’ve attached 2 pictures with the result on a pc and on tablet.

I would appreciate any help. Thank you.

thomasloven · March 10, 2020, 2:05pm

Please try release 12. It should be better at determining it’s own width.