Order groups first vertical

Dashboard
1

I am looking for a dashboard configuration to sort the groups from left to right into columns and within each column from top to bottom. The default sorting is from top to bottom first.
This is an example of a flexible solution (not manually) to reach the desired sorting: Edit fiddle - JSFiddle - Code Playground

Is this available with some default parameter?
Older topics don't solve this issue, but as I show, it is possible as flexible solution applicable to each screen size and mix of heights of the groups.

2

In Dashboard 2.0 - this is the default behaviour

3

I checked, and it does not.

Please visit my link for the preferred sorting. Maybe my textual expression is not clear (sorry).

4

If you are using FlowFuse Dashboard then it sorts from left-to-right first, and then vertically within a given group, as you've asked for here:

In the example you've shared, it does the opposite, it sorted vertically first, and then left-to-right.

Example of Group 1 -> Group 3 ordering:

Screenshot 2024-07-23 at 16.25.10
Screenshot 2024-07-23 at 16.25.102614×892 127 KB

and showing the ordering in the side bar within Node-RED:

Screenshot 2024-07-23 at 16.25.56
Screenshot 2024-07-23 at 16.25.561098×322 12.7 KB

What is the use-case you have? Not sure if we'd be able to support it given the current structure of the layout

5

I use many groups like 20 of all kind of sizes (different heights) and the menu is used on different interfaces. So for maintenance and different interfaces I want it dynamically solved.
The groups have a logically order and my brains search for a specific group looking from left to right, while the start (top) of the group can be in any column.
Identifying a nearby group normally helps the brain to get to the right spot in less than 0,1 second. But the current layout does not.

For example the current situation:
image

I understand a change from a grid system to a column system is impactfull.
However my question was: Is this available with some default parameter?
That seemed to me the right question before searching for an own hack.

PS: I am trying to recreate the example solution through css manipulation. Any hints are welcome.

6

90% solution:
set all groups to width 12 (full grid within column) and add this css for all pages:

#app {
    width: 100%;
}

/* add this style to the page */
.columns {
    column-width: 480px;
    column-gap: 6px;
    width: 100%;
    max-width: 480px;
    margin: 0px;
    padding: 6px;
    display: flex !important;
    flex-direction: column;
    height: 95vh;
}

/* add this style to the group */
.column-item {
    display: inline-block !important;
}
7

Okay, so your question is that you want the masonry/compressed layout, rather than the grid/row layout we now offer in Dashboard 2.0.

The short answer is no, we don't currently support that. We may re-introduce it at some point, but it was a fully JavaScript (and computationally expensive) layout to calculate in the original Dashboard

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.