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

hentes · March 10, 2020, 3:47pm

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.

shauder · March 11, 2020, 2:28am

@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.

hentes · March 11, 2020, 7:05am

@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.

jimz011 · March 11, 2020, 4:05pm

@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).

thomasloven · March 12, 2020, 9:51am

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.

jimz011 · March 12, 2020, 10:35am

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!

thomasloven · March 12, 2020, 11:17am

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.

jimz011 · March 12, 2020, 11:18am

Ok that is clear. Will test them soon, as I find it very intriguing.

shauder · March 14, 2020, 5:07pm

@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.

hentes · March 14, 2020, 6:12pm

@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:
                    ...

genik · March 20, 2020, 1:48pm

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?

doktordoc · March 21, 2020, 1:03pm

Please help
layout card is excatly what i need
awesome
dont now where to put - break
i put verticaly, but dont now to start new column
thx

tom_l · March 21, 2020, 8:57pm

Where you want the column to end and to start a new one.

doktordoc · March 21, 2020, 10:50pm

Hey

Sorry for bad English

I am new to HA

I now I have to put where to end column- where to start next one, but wherever I put it it’s bad, always error

I read instructions, about cards, do I need my cards all to be layout-card, is that the problem

Thx

dmertens · March 24, 2020, 2:57pm

Hi, I’m completely new to this and can’t find how to do this, what I want is just 3 columns and cards in every column, whatever I try my cards always get messed up, can somebody help me get started with this, because to be honest seems that most people are struggling with this :frowning

Basically I want to create below layout and just want to know how I can lock this so the cards do not get mangled everytime I’m adding the information in the cards

Thanks!

thomasloven · March 25, 2020, 7:40pm

@doktordoc @dmertens

What did you try?
What happened?
What did you expect to happen?
Why did you expect that to happen?

Afortunado_Duarte · March 25, 2020, 11:15pm

Thanks… could you share your layout-card details to see how you was able to obtain that layout please… I am not obtain the same result to see something like yours in my PC and phone view… in my phone view… all cards (glance, entities) are showed incomplete or very tight.
Thanks

Olen · March 26, 2020, 6:42am

I have an alomost identical layout to what you have, except that I sometimes want more than one card below each other in a column.

Stripping it down to the miniumu, this layout looks like (in one of my lovelace .yaml-files):

title: Thuis
panel: true
path: thuis
badges: []
cards:
  - type: 'custom:layout-card'
    column-with: 100%
    layout: vertical
    max_columns: 3
    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

(etc)

The “- break” moves to the next column, but since I specify “max_columns: 3” after 3 columns, it moves to the next row.

So if you want to add another card between card 1 and 4, you can simply add it after card 1, but before the “- break”. That still leavs card 2 on the top row of the second column, while pushing card 4 and 7 further down.

The best part is that this layout is also very much responsive, so on a smaller screen, ot will go down to two (or on) column, but still respect your "break"s. So place your cards wisely to look good also on a pad or smartphone.

dmertens · March 26, 2020, 8:51am

Great, thanks going to play with it!!

dmertens · March 26, 2020, 9:16am

Hi Thomas, I’m trying to create a grid layout where I can lock the cards so they don’t mess up when I change to another screen size or add, delete cards.

Attached my lay-out that I created on Lovelace for Raspberry Dashboard, but as was not able to get it done with your plugin, and in my interface now everything is messed up again if I change to another device like for instance an iPad add and/or delete cards

I installed your plugin and tried to get it done that way but to be honest for a non developer are these things quite hard to understand, and this is no complaint but the example code, and this is the case for most of the plugins is not really written that novice users can start working with it off course I understand that all of you devs do this in your spare time and probably free of charge and I’m very grateful for this, so really no complaint here, but sometimes is just nice to copy something, paste it in a manual card and you have something to start from. Most of time if I do this is one after the other error and you can’t find no clear information what you’re doing wrong

Probably I’m a little stupid but css is really not easy to understand, I really hoping that they or a dev is able to create some kind of graphical environment where you can easily build your interface, well to be honest I find the lovelace interface quite OK for this, but you should have an option to lock cards in place, define columns, rows and things like that, I’m sure that a lot of users will be able to create very nice dashboards that way, but now lets be honest almost everyone is struggling with this at the moment

@Olen was so kind to share at what looks like a simple example so I’m going to have a look at this and hopefully figure it out now

Thanks both for your quick reply and the hard work to support dummies like me with there annoying questions!

My dashboard yaml file like I did it without your plugin, now going to try to recreate that with the example of @Olen https://dmertens.stackstorage.com/s/dnalfKgXcotuonU

Thanks!!!