This is the same issue I have in the github issue I linked
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
1 Like
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?
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 ? 
As soon as “%%” appears in the code, problems immediately arise … I found a “little crutch”. Look here: my solution
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
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
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.
Please try release 12. It should be better at determining it’s own width.
Thank you @thomasloven. As you can see in attached picture now it distributes the content evenly but sadly can not get it to work on tablet.
On a pc appears 6 columns (that’s ok) on a mobile phone 1 column (that’s ok) but on a tablet 2 columns in place of 6. If I set the min_columns option then the mobile view breaks.
With your knowledge after your opinion what settings do I have to set to view correctly on all devices? (pc-6 columns, tablet-6 columns, mobile phone-1 column). Thank you.
@hentes my guess would be that the tablet does not have a big enough resolution width. You can maybe get the outcome you want by limiting the width of the columns on the inner layout-card with max_width.
@thomasloven I was checking out the 0.107.0 release and noticed it seems to break this. Things render but they do not auto layout horizontally anymore at all and just render in a vertical stack. Wanted to see if you knew this and if not I can open an issue on GitHub with more details if it is helpful. It basically behaves like before version 12 except for it not fixing it when re-clicking the view or navigating away and back like it did before.
@shauder the tablet is a Huawei Mediapad T5 with a resolution of 1920x1200 pixels. (I don’t know if it’s relevant or not but the browser_mod sensor is reporting only 960x600). I have tried to limit the column width as you suggested (I’ve tried with a 160 value) but this doesn’t change the layout only shrinks the content.
@thomasloven will the “gaps” at the sides return or will it stay this way? I wonder if I need to add the gaps myself now (which is not a problem though).
They will stay this way.
They were a bug I’m not sure when was introduced.
Without gaps is more consistent with how default stacks work.
Thanks that is great news, firstly this is better for me to make a decent tablet view and second I already have rewritten the entire setup to have gaps (so if you would have reverted it it would have taken me a bit extra time).
While I am at it I have one last question about the q-card which I want to try this weekend.
I guess q-cards can only be hardcoded cards right? It can’t be used in a similar way as lovelace_gen I imagine? As in I create a template of a button and then use different names for each actual button.
Also another question, can I have the same q card on the same view twice or more?
Thanks for your hard work!
A q-card can only be visible in one place at a time. It’s actually the same card, which moves.
Another browser tab/window is a different thing though. Browser tabs are their own isolated universes.
And no, they can’t be used for templating.
Ok that is clear. Will test them soon, as I find it very intriguing.
@hentes I am kind of running into this maybe. I have it split out into 3 columns on my Windows desktop in all browsers but when I view it in the same browsers on my macbook I get only one column. I even sized the windows to the same width pixel between the two OS and this happens. So bizarre. Not the exact issue your having but maybe related. I am also on the beta right now so I am waiting for that to fully release before I dig too deep into it.
@shauder meanwhile I’ve managed to achieve what I’ve wanted. Not 100% but it works. The only drawback is that when viewing on phone there are 2 columns in place of 1.
...
panel: true
cards:
- type: custom:layout-card
max_width: 100%
layout: horizontal
max_columns: 2
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
...
- type: vertical-stack
cards:
...
- type: vertical-stack
cards:
...
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
...
- type: vertical-stack
cards:
...
- type: vertical-stack
cards:
...Hi @thomasloven!
Firstly thanks
for a great card.
I want to ask: when you set panel true, my badges disappear. Can I somehow “save” them?