A bit different dashboard layout

Dashboard
,
1

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.

[{"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. :smiley:

2

Sounds interesting, got a screen shot?

3

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.

1 Like
4

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...

5

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.

6

A link to the example where used with grid.

7

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