WTH can't we Drag&Drop in the Dashboard

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 :face_with_symbols_over_mouth:

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: :slight_smile:

Looks like its being developed: https://twitter.com/hass_devs/status/1578367230575722496

9 Likes

An easy way to move cards in and out of containers would be awesome

1 Like

Something like this :slightly_smiling_face:

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

As I wrote in your issue on github, they’re busy with it because of this WTH topic. So just wait and give them time. This is not something they can implement in 1 month. They have to face everything with the drag/drop device wise. Zack is now working inside the HA team, so guess he is more busy inside the core, then on his own github.

yes thank you.
but it’s simply not possible to use it the way it should.
there are lots of spaces, because arranging one item to the top, arranges another one down without making sense… no option for resizing etc … horrible … feels like 2010

Yeah it’s not the best UX and indeed feels like 2010. They’re busy though.

Maybe you should give the lovelace-layout-card a try from Thomas Loven? You can set a page on your dashboard on the ‘vertical-layout’ for example. This causes the page to render all cards in a vertical line. If you then place a ‘layout-break’ card in between them. The vertical layout will continue in the next row. I’m using that right now so I’ve control on where my cards will go.

1 Like

Voted!

This would be awesome!

Yep, I also consider this kind of essential. I keep putting off making my dashboard look nice as it’s just such a pain in the ass at the moment.

4 Likes

What happened to this movement? How can anyone be against this? HA will never gain ground without the ease of aestheticism.

**Speculation** The reason could in part be because the dev who was originally working on D&D who joined Nabu Casa may have left according to that person’s LinkedIn profile.

Who’s that you’re referring to?

This is the no.1 reason I dont wanna use HA
Hate this xxxxing stupid click click moving strategy so much, its like using pc in 2000.

1 Like