Lovelace UI: Please Free Us From The Layout Trap

I really appreciate the work you guys invested in developing the new Lovelace UI - congratulations for bringing it into “production”.

But what i really hardly miss, is the possibility to arrange tiles and the size of tiles as i wish. I really think its a skid for users to be nailed to a four columns layout and predefined tile sizes. I wish i could arrange my components more freely. For example: I really love how the Grafana Dashboard works where you are absolutely free in how you want to arrange your graphs.

A year or so ago, Grafana did not work the way it works today. You couldn’t freely move graphs around, etc. So hang in there, I’m sure this is on the ToDo list, just not very high up.


Check out the custom cards… pretty sure this is doable


as you stated this has literally just launch a v1 into production, and it’s highly functional with the primary goal of Lovelave being simple UI editable interface. Over time additional functionality will be built in, but not at the sake of the primary goal.

And as @DavidFW1960 mentioned, you have complete control and flexibility to implement whatever you would like within Lovelace if you want to jump into yaml/javascript.

1 Like

What I hardly miss is the amount of work that has gone into Lovelace. (sorry couldn’t help it)

But seriously, this is open source. Grab the source and contribute to it. This is what helps bringing projects like this forward. As @kirichkov and @dubsix said, this is a first release it doesn’t it stops there. Give it some time to mature.

1 Like

My post was not intended to offend anyone… :wink:

It’s just a suggestion for an UI improvement, not more and not less

1 Like

This is definitely a good idea. Maybe something based on Bootstrap so that the whole layout is responsive as well.

1 Like

Ok guys, I’ve just updated to the newest release. Just to show you why it is important for some users to get rid of the fixed column and tile size layout, here’s a screenshot of my HA:

As you can see I have a tile called “ETA” in the bottom left corner. This is an iFrame tile calling a URL running on the same machine as HA. The URL is reverse proxied to a noVNC daemon on the HA machine which is forwarding the request to my central heating which is running a VNC Server.

As you can see, I’ve horizontal and vertical scroll bars which makes the hole thing kind of useless for me. That’s the reason why I’ve added it to the menu bar on the left.

Just by the way: The arrangement seem to have a bug. The iframe tile is on the last place nevertheless it is shown on the 2nd place. In the iOS App it’s shown correctly. The sorting is also shown wrong in the browser for some other tiles but shown correctly in the iOS App.

The iOS is a narrower screen so it will show cards left to right then down… so tiles will move around.

The best adaptive layout is to use stacks so it will show the whole first stack then the second etc… with no stacks, the first card is first and then next card etc which will be totally different potentially on different screen sizes. I don’t think there’s any bug but you have not posted your lovelace so we can tell…

At least it behaves different than before the update.

Hm, stacks… So you say I’ve to go back to yaml mode configure everything new from scratch just to get back again what i already had? Well,… don’t get me wrong, I really appreciate the work everyone is investing in this great tool. But this is crap!

No you can use the raw editor. But until 0.87, probably easiest to use yaml mode when you edit and you can cut/paste that into the raw editor. I have been maintaining my old lovelace yaml file and editing that and then cutting and pasting into raw editor - at lease for major edits but - yeah keeping in sync is a pain. The raw editor in 0.87 is much friendlier for stacks.

Nothing is stopping you from only using YAML mode. Isn’t choice an awesome thing!


If only people would read the docs and do at least the slightest hint of research before calling other peoples work crap. Especially if the whole piece of work is given away for free.

I’ve not called the work crap, the situation is crap. Or where is the advantage to have to reconfigure everything in yaml just to get the old behaviour back?

However the subject of this thread is about the layout inflexibility. My intention was just to suggest a improvement for the UI, you guys where upset from the beginning for no reason. You guys are really a bit sensitive - sorry for not having only praise for you. I think I will go for a downgrade and yes I’m pretty sure it will get better in the future as you are doing great work altogheter. So let me say it clear: THANK YOU!

1 Like

You can use tabs to sort your stuff and only keep so many icons, switches, whatever on one page that fits your screen. That was there already before the lovelace ui…
My tabs fit perfectly on a mobile phone, and they also look right on a 10" tablet, and of course on the pc as well…
Or am I misunderstanding something?

Lovelace is a complete overhaul of the UI and how it can be configured. First and formost you can build it on the fly, no restarts of HA. And you can do pretty much everything from within the browser, which is also a step forward. I don’t see how that is a layout trap.

What exactly are you missing?

Fail enough, maybe I got a bit over defensive. I didn’t mean to jump at you, sorry for that.

Ok, take a look at my Home Assistant Dashboard (I’ve posted this link already above):

The tile at the left bottom corner (>ETA) has scroll bars. This is an iframe showing a VNC session. Because of the “hard coded” columns it’s not possible to resize this tile (horizontaly) to get rid of the scroll bards. Thats not the only thing,… it would be nice to be able to resize and re-arrange the camera/picture entities (the two in the center column and the one at the top right corner). For example to view two of them in a smaller size than the third one. Sure, I can configure in yaml files to use stacks or such things, but the possibilities are limited and requires me to go back to the command line which is a hassle sometimes.
I think using customized css or html is also not the way how a user wishes to interact with an UI.

As mentioned above: In my eyes the ideal way to improve that would be a dashboard which works like the dashboard from Grafana. I’m pretty sure you know it but if not, take a look here for a demo:
It’s so flexible and you are almost free in how you want to view your tiles. There are no fixed columns, no fixed tile sizes, you can arrange everything (almost) absolutely free and the best thing: Everything works inside the browser.
I can’t imagine how cool the Home Assistant dashboard would be if it would support this kind of flexibility. :slightly_smiling_face:

Thats still an issue for me, unforunately i don’t see any progress in here.

Newest example: I just want to have some buttons executing a shell command. I can do this using the “entitiy button” in lovelace. But all of these buttons are a seperate card, using the hole width of an entire column - WTF?! Really guys,… I don’t understand why you don’t see that the inflexibility of the Home Assistant UI is a thing which has to be fixed.

So use a custom-button-card… it’s not like you don’t have any options.

That’s right, this is an option. But does anyone really think that it is user friendly having to use custom cards for the simplest things? The documentation of building a custom card leads to the developer documenation - this thing alone should show everyone that a custom card is nothing a “normal” user with a simple requirement should ever get in contact with.

1 Like

There is a difference between developing a custom card and using a custom card! There are a world of custom cards available for every conceivable use. If you don’t want to use them then fine - but if you want that functionality then you’re between a rock and a hard place. Many CC features will never be accepted into the core cards.