This is fantastic! I hope three layout design featurs are added to sections:
1.A feature to let a section span over several other sections (horizontally) eg to allow for a full width top header menu button bar above other sections:
Resizing sections, eg if I have 3 sections side by side on an iPad, Iād like column 1 & 2 to take up 40% screen width each, and column 3 using 20%.
Make sections reusable over several pages, e.g. defineing a top header menu button section once, and adding it to all my 20 dashboard pages as top menu
What I really want to be able to do is to have different āvertical rowsā of sections, where each āsection rowā can have a different number of columns horizontally, and each column having its own width (eg 20% or 40% of screen width), to build things like this:
Would be great to be able to resize the sections as you want them. Im still having trouble with big spacing between my three sections right now, and i guess that would eliminate the problem
This looks fantastic and is exactly what Iām hoping for from the section feature in the future.
However, I donāt know whether it is really useful or necessary to be able to specify the width of a section as a percentage. What we actually want is to be able to define the number of available columns per section, right? This also results in a relative ratio: if a card is to span 3 of 4 available columns, this corresponds to 75%. And a section with 4 columns is 33.3% wider than a section with 3 columns. Finally, we want to define the relative ratio of the sections to each other and the layout engine takes care of adapting the sizes to the available screen size.
This would be achieved by giving the first two sections 4 columns each and the third section 2 columns. Or 8 8 4. One advantage of this would be that you can make the third section larger, e.g. 8 8 5, without having to change the sizes of the other sections. These are automatically reduced accordingly.
These are interesting suggestions, but unfortunately they will not result in a predictable layout when the dashboard is resized or displayed on a larger or smaller screen size, which is what the Sections view was specifically designed to address. Our current goal is to ensure that a user only needs a little or no effort to create a dashboard that they need.
This particular dashboard project we are currently building on our roadmap is about making dashboard customization easy for everyone in the household. We are building this to ensure that everyone can get an adequate and useful dashboard without heavy tinkering.
There will be features, such as drag and drop, that will benefit those who like to tinker and design their dashboard to their exact liking (e.g. myself) as a byproduct of this project. However, they are not the main target audiences of this particular dashboard project. While itās true that Home Assistant will always be adopted by users more advanced than other smart home systems, we need to ensure that other people in the home can use it too.
This is not to say that features that allow you to place cards exactly where you want will never come. Itās just that these features are not on the roadmap yet until we can nail the basics for everyone down first. Itās important that we keep our direction clear. There will be resizable sections further down the roadmap, but it will be designed for responsiveness not full flexibility in mind, so there wonāt be fine-tuning options like what is suggested here.
With that said, we had created designs for a āmanual gridā that will allow the kind of freedom you are looking for, but it is not the core maintainers teamās priority right now. However, Iām happy to provide the product plan for anyone who wants to contribute and build this new Manual Grid view.
This is the correct way to think about sections. Currently, all sections have 4 card columns within. Eventually we want to be able to have different section column widths, so two section columns with 4 card columns and one section column with 2 card columns would be possible, i.e. 4 4 2, or 40% 40% 20%.
it would be great if, next to the section improvements, some basic extra options could be added for the current default masonry view
We have to install custom:layout card to simply have a vertical layout in our views.
(Or fake it by using a core vertical-stack, but ofc that adds new margins, so still requires custom: card-mod, in this case even custom: mod-card to get rid of those, so making that a moot option)
a max_columns option for current masonry would be sufficient.
would something like that be a somewhat near future possibility?
Thank you very much for the encouragement. The section view is absolutely great, but unfortunately the possibilities are still somewhat limited. Being able to set the number of available columns per section would be the next big thing. I can hardly wait for this feature to be implemented and look forward to the improvements with every update. Good work so far, keep up.
Hi all
How i can add in sewction view (probably in title section) icon as you show on webpage homeassistant on first demo and what is a icon type that it is colorsā¦?
Those are not icons but emojis, and you can just add them like normal text, either through your mobile app keyboard, or on windows open the emoji keyboard with Win + . key.
Iāve got to request one quality of life feature for different devices: Contingent visibility of sections titles.
My dashboard is designed in a way as that it is usable on phone, home tablet and my PC. For it to be more condensed, Iām not showing section titles on my tablet:
So it would be great to have a kind of global toggle for the whole dashboard where the user can define for all titles what I currently am using for just a singular ātitle tileā:
Guys, please. Just let me use CSS grids properlyā¦
It is by far the most powerful and flexible solution for āadvancedā users, and no matter what you cook up here it wonāt even come close to what one can do after following a 5 minute tutorial on CSS grids.
(HASS is already incredibly hard to even just install for casual users, so I donāt see why you feel the need to āsimplifyā the UI of all things.)
All I want is a way to define areas on the page that are flexible, but are different at certain cutoff points (mobile & pc), and it to work everywhere consistently and without hoops to jump through. Namely layout-card.
For me itās the other way around: when I use visibility tab, the content of the cards is hidden, however thereās an empty space where the card used to be. I want the default behaviour to be that the cards just queue in line and donāt leave empty spaces. Real strange however itās not the same for everyone? Might depend on browser version or something? Iām using some really old childrenās tablets for dashboard, that might have something to do with it?
Really like the new drag and drop sections! Has finally motivated me to build a wall panel dashboard to put in my kitchen. Also appreciate the improvements in each release. With the addition of wide sections in the September release, Iām curious if there is a way to have smaller sections. Currently, the smallest section I can create is 4 grid columns. Iād like to create a section of 2 or three grid columns. Is this possible? If not would love to see it on the roadmap. Thanks.
