# A bit different dashboard layout

**URL:** https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869
**Category:** Dashboard
**Tags:** node-red-dashboard, layout
**Created:** [8 December 2022 14:53 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869 "2022-12-08T14:53:08Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 December 2022 14:53 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/1 "2022-12-08T14:53:08Z")

</div>

Sometimes the default layout just doesn't do the trick. And we have been agreed with it as there is not much to do with it.  
Well, I was forced a bit to think again ...

There isn't too much but it may open some possibilities to play with it.

```auto
[{"id":"4e7e0d90ee7aa1ad","type":"ui_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"A bit different layout","order":7,"width":0,"height":0,"format":"<style id='different-layout'>\n .masonry-container {\n position: relative;\n width: 100%;\n margin: 0 auto;\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: center;\n gap: 0.5em;\n }\n .masonry-container > * {\n position: relative;\n left:unset !important;\n top:unset!important; \n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":630,"y":800,"wires":[[]]},{"id":"674712f8d915bcc0","type":"ui_group","name":"Default","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

No guarantees what so ever of course. 😃

---

<div class="post-metadata">

### Author: ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [8 December 2022 16:19 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/2 "2022-12-08T16:19:24Z")

</div>

Sounds interesting, got a screen shot?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 December 2022 16:26 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/3 "2022-12-08T16:26:01Z")

</div>

Well the point of this is again the layout issue where for different widths on groups (if you have quite of many) will mess layout in the way that some cards will overlap. That is when you'll need to show it on different screen sizes.

What this little bit of CSS does - it overrides absolute positioning of cards and as the container is `flex` (why not the `grid`) - just use what ever the `flex` or `grid` can do with direct children.

---

<div class="post-metadata">

### Author: ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [8 December 2022 16:34 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/4 "2022-12-08T16:34:40Z")

</div>

Ah, OK. I was curious whether there were some ideas for FlexDash... (Which uses the native grid.) I've been pondering about alternatives to grid layout...

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 December 2022 16:37 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/5 "2022-12-08T16:37:55Z")

</div>

One thing is for sure - there isn't any universal layout system to just plug in. It always takes at least some tweaks. You can be happy only if you don't need to push any limits.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [11 December 2022 09:57 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/6 "2022-12-11T09:57:47Z")

</div>

A link to the example where used with grid.

> [@Is it possible to tile the groups in node-red-dashboard vertically?](https://discourse.nodered.org/t/is-it-possible-to-tile-the-groups-in-node-red-dashboard-vertically/71990/6):
>
> Well cant say it is impossible but many things then do need heavy overrides. So the layout behavior is completely different... Smaller screen: Bigger screen Flow contains totally random nodes inside groups but all are from default collection. [{"id":"1fb35f29bb459e80","type":"ui\_button","z":"bf0d83d32eec75c2","name":"","group":"674712f8d915bcc0","order":9,"width":0,"height":0,"passthru":false,"label":"random","tooltip":"","color":"","bgcolor":"","className":"","icon":"","…

---

<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: [10 January 2023 09:58 UTC](https://discourse.nodered.org/t/a-bit-different-dashboard-layout/71869/7 "2023-01-10T09:58:22Z")

</div>

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