Voted for ths one, although I understand what a hell this must be to create. The big variety in cards with their contents makes it a pain to implement. For example: Changing the aspect ratio of an card by resizing it makes it hard to determine where the content should be…
5 Likes
I blame Zack for that…
1 Like
This is not an issue. Current Lovelace implementation already handles this. Just resize your browser window horizontally and you will notice how the cards individual layouts will adjust with the dashboard width. Or add a card to a panel view type dashboard, where it will stretch over the entire horizontal area. Of course some cards handle fluid layouts better than others. But I think the main point is to get rid of this horrible column based auto-arrangement ‘feature’ of current Lovelace and replace it by a user editable and flexible (grid like ?) layout structure using an intuitive drag and drop approach. Much like some popular custom components already do.
1 Like
It would also be great if we could use a colour selector to modify the colour of each part of a card (text, background, drop-shadow…) as well as a place to enter in other options such as card radius value etc.
4 Likes
I believe this is already possible but not in an easy way. With classnames and css it should be possible, but no easy way as I said. I need the whole drag/drop/resize feature more 
I’d be happy if the up button just moved the card up and the down button moved it down, but at the moment it’s anyone’s guess where it will go. If you add a new card to a view that you want to be at the top, it starts out at the bottom of the view and it’s a nightmare to get it there
10 Likes
It’s a must-have! 
Such a great & simple idea to make users’ life a little bit easier and have this user-friendly feeling about HA
3 Likes
Always an exciting surprise!
3 Likes
I think we should split it into two parts:
- reordering things inside dashboard
- moving widgets between containers (stacks, grids)
While the 1. would be helpful and easier to implement I think the end goal should be 2. Imagine being able to drag and drop things inside and between grids and stacks. 10x speedup in dashboard editing, the creativity that it would spark!
3 Likes
In addition, these things should re-flow smartly on mobile.
In the current state, stacks nested inside a grid is one of the best ways to get a decent, consistent layout with even row heights. But if I set a grid 3 columns wide, it should automatically be one-column wide on mobile, not three insanely tiny columns.
2 Likes
I would love Lovelace to support laying out dashboards like Grafana does. It is flexible, but also much more predictable than it is currently.
3 Likes
If you make the browser window the width of one card it makes it easier to see which order the cards are stacked.
Here’s a link to the repo in case anyone is interested in checking it out:
Last time I tried (6+ months ago) it worked well enough, though with a few quirks on mobile. I see some activity in the issues indicating that it might be broken with newer versions of HA, though.
I’m still a little surprised that this hasn’t been given a higher priority. Especially given that this year’s theme is “streamlining experiences”, and I would assume for the typical user, the thing they would be interacting with most would be their dashboard. The current up and down arrow method is archaic and really unintuitive. When I first started using HA this was the thing I was most shocked at.
7 Likes
The inability to control the position of Lovelace cards accurately is my WTH today 
2 Likes
This is a problem with the positioning of cards, which I describe in the topic related to the availability of HomeAssistant (compliance with WCAG guidelines). Cards move in columns (up / down), not in rows (left / right). It makes sense on the smartphone screen. We have one card in a row. There is chaos on the computer screen. We read from left to right, scan the image from left to right, and in HomeAssistant we place cards from top to bottom, column by column. Weak. Example:
- In the view, add a “button” tab with which you want to turn on the light.
- Duplicate the added button 5 times.
- We now have 6 buttons in the view (2 rows of 3 buttons, 3 columns of 2 buttons).
- Now navigate to the buttons with the tab key.
- We will review the buttons in the order (vertical letters, horizontal numbers) a1, b1, a2, b2, a3, b3. There should be a1, a2, a3, b1, b2, b3. The focus should move across the buttons (using tabs) from left to right, line by line. Now it goes from top to bottom, column by column. Cards should move in rows (left / right) not in columns (up / down).
For an even better picture of the problem. We have 12 cards on the page (4 rows of 3 cards, 3 columns of 4 cards). We want to move the card a2 to the position a1 (letters vertical, numbers horizontal). We want the middle card on the first row, set as the left card on the first row.) Tap on the “Move up” button. The card should move to the left to position a1. Currently, however, it disappears from the screen and goes to position d1 (it becomes the left card in the last row). As you can read in this thread, there is a big problem with that. I assume you are people who use eyesight. Bouncing cards from the top of one column to the bottom of the other create an uncomfortable situation. You have to scroll the screen to check what happened. You can take a look and see, “Oh shit, the card is here now!” I am blind, I cannot see, I cannot glance. I am using a screen reader. Your eyesight is getting lost, I get lost 3 times more with my screen reader. For this reason, I am asking you to improve this functionality.
The solution with buttons “Shift left”, “Shift right”, “Move up”, “Move down” is a good idea. It is a good idea because it is a more logical and convenient solution. Additionally, you can enter the “Cards layout” mode. When this mode is turned on, each card has an edit field that defines its position (a1, a2, a3, b1, b2, b3 …). We set the position of the cards (e.g. we swap the position of cards a1 with b3 and b2 with b1). We save the changes. Done. The cards go to the correct positions.
More on this subject from the point of view of accessibility at the link below (voting, compliance with WCAG, as you can see, helps everyone: 
An easy way to move cards in and out of containers would be awesome
1 Like
Something like this 
https://strml.github.io/react-grid-layout/examples/11-no-vertical-compact.html
12 Likes
Begs the question, why on earth ISN’T this already in HA? That example stevenr posted is precisely what I’d expect to find in HA.
2 Likes
2 years ago, nothing happened… really?
lets face it, what users (not admins) of HA see, is the dashboard - and that looks crap and already old. and is even worse to build with.
do something about it HA team… things like this are often the first sign of something going wrong