# Order groups first vertical

**URL:** <https://discourse.nodered.org/t/order-groups-first-vertical/89664>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 July 2024 10:27 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664 "2024-07-22T10:27:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bolukan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bolukan/32/77991_2.png) [@Bolukan](https://discourse.nodered.org/u/Bolukan)\
**Post date:** [22 July 2024 10:27 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/1 "2024-07-22T10:27:54Z")

</div>

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](https://jsfiddle.net/yo5bm4xn/)

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 July 2024 08:10 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/2 "2024-07-23T08:10:38Z")

</div>

> [@Bolukan](#):
>
> 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.

In [Dashboard 2.0](https://dashboard.flowfuse.com/) - this is the default behaviour

---

<div class="post-metadata">

**Author:** ![Bolukan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bolukan/32/77991_2.png) [@Bolukan](https://discourse.nodered.org/u/Bolukan)\
**Post date:** [23 July 2024 15:09 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/3 "2024-07-23T15:09:43Z")

</div>

I checked, and it does not.

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 July 2024 15:27 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/4 "2024-07-23T15:27:06Z")

</div>

If you are using [FlowFuse Dashboard](https://dashboard.flowfuse.com/) then it sorts from left-to-right first, and then vertically within a given group, as you've asked for here:

> [@Bolukan](#):
>
> 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.

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b8b9094223b107e5eb67b5d054fe90227c349101.png)

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

 ![Screenshot 2024-07-23 at 16.25.56](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a82b967d0a3e8bac232180a137c9fa8fac2ee76f.png)

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

---

<div class="post-metadata">

**Author:** ![Bolukan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bolukan/32/77991_2.png) [@Bolukan](https://discourse.nodered.org/u/Bolukan)\
**Post date:** [23 July 2024 15:50 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/5 "2024-07-23T15:50:50Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/23871b623cb99b7695650cb570aac19d40013917.png)

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.

---

<div class="post-metadata">

**Author:** ![Bolukan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bolukan/32/77991_2.png) [@Bolukan](https://discourse.nodered.org/u/Bolukan)\
**Post date:** [23 July 2024 19:28 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/6 "2024-07-23T19:28:47Z")

</div>

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

```auto
#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;
}

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 July 2024 13:21 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/7 "2024-07-24T13:21:20Z")

</div>

> [@Bolukan](#):
>
> However my question was: Is this available with some default parameter?

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 August 2024 13:21 UTC](https://discourse.nodered.org/t/order-groups-first-vertical/89664/8 "2024-08-23T13:21:51Z")

</div>

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