I have the perfect, simple solution for arranging the cards layout in lovelace

Feature Requests
,
1

Instead of only using a number, just add a column letter. so it looks like this:

A1          B1          C1
            B2          C2
A2          B3         
A3                      C3

there is room for this option see image below…
Schermafbeelding 2024-01-04 013803
with this option no one ever need the horizontal and vertical stack anymore…

After some discussion here there might be a better even simpler solution (option B)
Schermafbeelding 2024-01-04 013803B

just add a left and right button. so the card stays at it’s designated number but you have the option to put it in another column. now the column selection is based on the height of the card.

to visiualize it, example card order:

1   2   5
    3
    4
6   7   8

so to get card 3 to the right:
with my solution (option B): you press the right button once and the card is at the position where 5 was and 5 moves to the next position as usual. done!

how to do it at this moment: i have to make vertical stacks etc… copy the yaml of each card into the stack. and 5 minutes later it’s done. until you want to move something, then you can start the yaml shuffeling all over again.

that is just not user friendly and since HA is trying to become more user friendly, i decide to give it a go. this is just basic functionality and we should not be needed to install extra stuff like thomas loven lovelace layout card or stacks for just getting the card were we want.

i’m not saying my idea should become the solution, i’m just trying to think with the developers and i think by adding a simple left and right button we get so much more control over card placement and thus happy (beginner) users and we can leave everything else as it is. so i think this is a small adjustment with a big improvement!

2

How would that work in a responsive web world?

1 Like
3

you mean on your phone?
just the same as it is right now, all in one row below each other.

4

Well your sample has three columns. How are those elements arranged if my browser only has room for 2 columns?

5

that’s a good one. i should say column C gets re-arranged at the end in columns A and B.
so C1 becomes A4, C2 becomes B4, etc.

something like that?
after that you can put it on the place you like…

6

So… how it works now?

And what about if you have room for 4 or more columns?

If you want more control over your layout you can use the stack and grid cards.

2 Likes
7

how it works now is dependent on the height of the card it get placed in a column. but there is no easy way to get it in the right column. you have to shuffle around with long and short cards to get them all in the right place, if that won’t work the workaround now are the vertical and horizontal stacks, but that is some work copying the yaml and pasting it in the stack.

the solution i gave is way more user friendly and easier to use.

so what about if it has more or less columns?.. it can be auto arranged like i said.

but maybe i have an easier solution, keep the numbers as it is but add a button to move the card (at its number) to the left or right…

by the way, it would also be nice if the layout is stored per device…

8

The card height is the thing you are missing here. You have to account for that.
You would also have lock in the number of columns.

9

Isn’t the whole point of modern web design that the dashboards should display differently in different size screens? And that fixed layouts defeat that aim?

1 Like
10

yeah that’s why i said the above.

and it aint fixed layouts. the layout will be arranged to match the columns of the device. just auto reassign the new column.
but what do you think about my option B. keep the numbers as is and add a left and right button?

11

the card height is with this solution not important anymore. you can simply move the card up, down, left or right…

12

Yeah that is an interesting one :slight_smile:

13

I see what he’s saying… it can be hard to predict what a layout will look like when going from a web browser on a laptop to a phone, or from a phone to a large, wide screen.

14

I have 1 column on my phones, 2 on my tablet in horizontal mode, 3 on my screens when the menu is expanded and 4 and 5 on my screens when the menu is collapsed, due to different resolutions on them.
At the same time I have cards that differ in height all the time. My weather forecast card will change height due to the text from the provider, my media player cards will change height due to the SnapCast players players connect to the specific MPD players, my ToDo list will change height and I have several cards with conditional settings.
The only thing that is fixed in HA Lovelace is the card width, which is not enough to base a static layout on.

There is the current floating layout that works on all screen sizes and setups and then you make your own for each specific device with another dashboard for each device with the layout-card integration.

15

I agree that masonry layout is really painful sometimes.
I was using a custom card

But it was not updated in a long time and badges are not working with those layouts.

Issues are not picked-up so I went back to tom_l’s solution : stacks (including “in-card” ones)

HA is missing an additional layout for sure, like a grid.

That would be a nice addition indeed but not in the masonry config, as a new layout:

You pick grid, you define the number of columns, then it fills in left to right and top to bottom. If you’d like an empty space, there should be a new card type : type:empty that allows the card on top of it to span over 2 rows.

For who is using different screen sizes, like I do for computer, tablet and phone, then what I did is duplicate the card in a different view and adjust. So, idea for another feature request : create card alias (you create a card, click the 3 dots then create alias and tell in what view you’d like to see this same card as well)

1 Like
16

The effect you want would only really work if the cards have a fixed height, which you can not guarantee.

17

Not in an hypothetical new grid layout, every space is the height of the shortest card of the row (excluding the empty card ones)

A bit like a table in html with rowspan and colspan, but the colspan being automatic if the space under is an empty card (spanned cards are excluded from the row’s maximum height formula).

EDIT: Or, it could be an additional tag in the card, specific for the grid layout (colspan: 2, rowspan : 4) but then if the card is bigger than the span, it will have a scrollbar or something :slight_smile:

I’m not saying that it is a matured idea, it came replying to the thread. But it might trigger a debate and a good solution at the end.

18

I guess you want something similar to this.
image

But what happens if the green card change height?
Will you accept a layout like these or how do you solve it?
image

19

Yeah and nothing should change about that. the only thing i’m saying is if we have a left and right button, the positioning would be very easy because on this moment we can only increase or decrease the number but we have no control to what column it jumps.

to visiualize it, example card order:

1   2   5
    3
    4
6   7   8

so to get card 3 to the right:
with my solution (option B): you press the right button once and the card is at the position where 5 was and 5 moves to the next position as usual. done!

how to do it at this moment: i have to make vertical stacks etc… copy the yaml of each card into the stack. and 5 minutes later it’s done. until you want to move something, then you can start the yaml shuffeling all over again.

that is just not user friendly and since HA is trying to become more user friendly, i decide to give it a go. this is just basic functionality and we should not be needed to install extra stuff like thomas loven lovelace layout card or stacks for just getting the card were we want.

i’m not saying my idea should become the solution, i’m just trying to think with the developers and i think by adding a simple left and right button we get so much more control over card placement and thus happy users and we can leave everything else as it is. so i think this is a small adjustment with a big improvement!

20

I understand what you are aiming for, but you seem to fixed on 3 columns.
Your setup should be able to switch to 1,2,4 and 5 columns without having to change the YAML code.

Try to write in text how the cards should be arranged without absolute positions and make it so that it will work for all number of columns.

1 Like