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.
Thx, But of course i donāt know where to put the breaks, it depends on the device on which it is displayed ā¦
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?
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.
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
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.
