So here’s my problem. I have 5 cards. I order them in importance of the ones I want to see first. So cards 1,2,3,4,5 where the card number is the order of importance.
On a narrow screen I get
1
2
3
4
5
But on a wide screen I get:
1,4
2,5
3
It’s maddening. What it should displayed is:
1,2
3,4
5
Is there a plan to fix this? I know there’s a custom card - BUT the issue that is the requirement to stack the cards inside another card makes it all quite nightmarish and hard to maintain if you have the same card in multiple tabs when they’re embedded in other cards - you can’t just cut and paste any changes you make because the spacing gets screwed up.
There is math behind the order in which things appear. The goal of the math is to fit all cards on the screen with the least amount of scrolling. If you want a specific order, you should use the custom card that allows you to set the order yourself, or as @DavidFW1960 said, group things via stack cards.
Where can I find that particular custom card? The closest I have found is Card-Modder, and that is still extremely confusing to use as the “report_size” property does not directly correspond to a specific position in the order, and it still requires cards inside other cards.
I’m having the exact same problem; Cards jump all around and randomly all over the place on my screen. Any attempt to try to order cards using the up/down arrow makes absolutely no sense at all to me. If I click the up arrow on the last lower right card on the screen, it jumps sideways left sometimes, other times i jumps 2 steps upwards, and so on. Even clicking the down arrow sometimes result in cards jumping up!?!
How is this to be understood?
Is there a way to get control of the order in which cards are organized? I want i.e.:
1,3,4
2,5 7
6
It’s not random. They jump around based on the height of the cards. Basically, you’ll always end up with a layout that has the least amount of vertical scrolling based on the horizontal width of your view into the page. Just open HA with a browser and adjust the size, you’ll see everything move around as you shrink and expand the browser window.
If you want to see a true order, shrink the width of your screen so that it’s only 1 card wide. Then move things around and it will not jump. But as soon as you add 2 widths, it will attempt to get to the least amount of vertical scrolling.
@thomasloven explains the actual math behind the order pretty well. Here’s his explanation:
@petro, thanks for taking the time to reply. But it doesn’t seem to add up. Look at the enclosed screen dump: There are several cards below column 1&2 (hence the scroll bar), but column 3 is almost empty (?) Why isn’t HA filling in column 3 instead of stacking things in already overfilled columns?
I have tried to move things around, but I simply can’t figure things out. So I guess I’ll give up. This just isn’t logical.
If you follow the logic it makes sense. Your cloudy card, 2 media player cards, and harmony remote card are all less than 5 units.
Therefore, your girls and boys card and your remote get placed in the first shortest column. Which is column 1. And your remote will get placed into the next shortest column, column 2.
Move both of those cards to position 1 and 2 when you shrink the width to 1 card wide, and you’ll most likely get 3 equal sized columns when you expand it to 3 columns. If that doesn’t appease you, you can use this card modder to fake out the size of your cards to get them to logically fall in the correct positions.
1 unit is equivalent to 50 pixels in height. I’m just spitballing here. I don’t know for sure. But not to sound like a broken record, the best way to see the ACTUAL order is to shrink your view so that its only 1 card thick. Then you can see what happens when you expand.
Well, I tried that “trick” (first a single column, then arrange manually, and then widen out the browser window), but for the life of me - I cannot understand why placing a single card underneath the remote control, and leaving column three almost empty, is an intelligent arrangement (?)
No matter what I try, I cannot get column three filled.
Some of my cards are already 280+ lines long - (picture-elements). So stack three of those for my house and we’re at 840 lines. Then I need to add the other items I’d like as well.
Some of panels are repeated on other screens. If I want to change anything I have to edit several 1000+ long cards because cutting and pasting between cards won’t work due to YAML spacing requirements and the fact that the now nested cards have different spacing requirements.
YAML is just horrible for nesting, and the Lovelace editing tool is poor.
You can’t even comment in the Lovelace editing tool to make things easier because it strips them all out.
What I don’t understand is the instance in this thread that efficient screen usage is more desirable than consistent layout. One of the things I loved about HA was the understanding that one size fits all is wrong. But that’s not the philosophy here it seems.
count me as someone who just started using lovelace and thinks this is madness. i’m with @Wizbowes on this.
i’ve got three cards on one layout, and if i set them up in a certain order i end up with three columns (one card each), which is what i want. the problem is, that i want the card that is in column 3 right now to move over to column 1, and shift the other two to the right. that should be easy, right? nope. not only is it not easy, it doesn’t seem possible…if i move that last card to the first position, i end up with two columns and have to scroll (even though if it were three columns everything would fit on the screen vertically). this is crazy.
i get that the custom layout card is there, and i’m trying to tinker with it to get things to where i want them…but the scenario i just described above is insanity. why can i not just move the last card to the first column and keep everything else as is (just shifted over one column each)?
Because the system places cards based on the height of the card. The system wants to minimize the Y scrolling and that’s it. It will move cards around to meet that goal.
You can’t place them where you want without using the layout card.
but even that doesn’t make sense in this case, because as i said if i just moved that card to column 1 and shifted everything over one, there would be no vertical scrolling. as it is, it puts them in two columns and i have to scroll to see the bottom of the card it puts underneath it. that was my point.
It never moves the first card. That’s always static. It will move the other cards. And when you say “I move the card to column 1” are you moving the item in the list in yaml to the first position?
yes, i’m moving it to position 1 using the GUI. and i’m not saying it should move the first card, i’m saying if the goal is to minimize vertical scrolling, that’s not being accomplished here. if it were to leave the first card in pos 1 (which is where i want it), and then go three across with the other two cards each in their own column, there would be NO vertical scrolling needed. everything would fit on screen, exactly as it does if i move that card to position 3.
that’s not what is happening, here. it’s putting card 2 under card 1, and card 3 in its own column next to it. this makes me have to scroll down to see the bottom of card 2, rather than it just fitting on the screen as it would if it were in its own column of a 3-column layout.
