Is it possible to tile the groups in node-red-dashboard vertically?

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":"","payload":"","payloadType":"date","topic":"topic","topicType":"msg","x":180,"y":100,"wires":[[]]},{"id":"8ec4a283e5a7af92","type":"ui_button","z":"bf0d83d32eec75c2","name":"negative value","group":"674712f8d915bcc0","order":2,"width":3,"height":1,"passthru":true,"label":"- value","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"-5","payloadType":"num","topic":"","topicType":"str","x":200,"y":180,"wires":[[]]},{"id":"d5d8e1e3310fa854","type":"ui_button","z":"bf0d83d32eec75c2","name":"positive value","group":"674712f8d915bcc0","order":3,"width":3,"height":1,"passthru":true,"label":"+ value","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"3","payloadType":"num","topic":"","topicType":"str","x":200,"y":140,"wires":[[]]},{"id":"de6f6d0003c8f83c","type":"ui_template","z":"bf0d83d32eec75c2","group":"a0cb64ed7acda92f","name":"text-input","order":6,"width":"6","height":"1","format":"<style>\n    /*the container class defined as additional class for ui_template*/\n    .input-container{\n        display: flex;        \n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n        padding:3px 12px;\n    }\n    /* a paragraph which is direct child of the input-container*/\n    .input-container > p {\n        color:red !important;\n        user-select:none;\n        width:100%;\n    }\n    /* an input element which is direct child of the input-container*/\n    .input-container > input{\n        background-color: transparent;\n        border: unset;\n        border-bottom: 1px solid #00a9ff;       \n        outline: unset;\n        color: #e2ff00;\n        text-align: end;\n        width:3em;\n    }\n\n    \n</style>\n\n<p>HW Target temp</p>\n<input type=\"text\" min=\"17.2\" max=\"63\" ng-model=\"inputChange\" ng-keypress=\"$event.keyCode === 13 && sendInput()\"><span>°C</span></input>\n\n<script>\n(function(scope) {\n\n    //define a variable to hold and share the typed data\n    //so it can be used in any function in scope\n    let inputData = ''\n\n    // function to be called on keyboard \"Enter\"\n    scope.sendInput = function() {\n        //if the data is empty string, dont send anything        \n        if(inputData == ''){\n            return\n        }       \n        // send last know inputData to the server\n        scope.send({payload: parseFloat(inputData), topic: \"input-changed\"})        \n    }\n\n    scope.$watch('inputChange', function(data) {\n        if (data) {            // every time something is typed, store the data so it can be used whenever needed\n            inputData = data;           \n        }\n    });\n    // this can be deleted if you don't need to react on any input message.\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n        // Do something when msg arrives     \n        }\n    });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"input-container","x":240,"y":220,"wires":[[]]},{"id":"ff30c601e53818e8","type":"ui_switch","z":"bf0d83d32eec75c2","name":"","label":"AC switch","tooltip":"","group":"a0cb64ed7acda92f","order":5,"width":"6","height":"1","passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":280,"y":260,"wires":[[]]},{"id":"b9039e34deee9b65","type":"ui_text","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","order":7,"width":0,"height":0,"name":"","label":"AC text","format":"value","layout":"row-spread","className":"","x":320,"y":300,"wires":[]},{"id":"9821976d.81e4a8","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":500,"wires":[["5d17609.94dd2a","9d583201.b3e3","7ceb37db.bf6158","9f86e34f.b94b5"]]},{"id":"5d17609.94dd2a","type":"random","z":"bf0d83d32eec75c2","name":"","low":1,"high":"100","inte":"true","property":"payload","x":380,"y":460,"wires":[["ff079329.434ad"]]},{"id":"9d583201.b3e3","type":"random","z":"bf0d83d32eec75c2","name":"","low":1,"high":"100","inte":"true","property":"payload","x":380,"y":540,"wires":[["a8b35e60.cbf8b","6a797db2.668714"]]},{"id":"a8b35e60.cbf8b","type":"ui_template","z":"bf0d83d32eec75c2","group":"3cd020e88fa644c5","name":"simple level blue ","order":9,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n    <div class=\"leveltext title\">LEVEL</div>\n    <div class=\"leveltext value\"></div>\n    <div class='levelbody' style='background:#2196f399;'></div>\n    <div class='levelframe' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n   \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(!$(\"#level_\"+scope.$id)){\n            return\n        }\n        $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n        $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":540,"wires":[[]]},{"id":"9139794a.12e668","type":"ui_template","z":"bf0d83d32eec75c2","group":"a0cb64ed7acda92f","name":"simple level top down","order":12,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n    <div class=\"leveltext title\">BLINDS</div>\n    <div class=\"leveltext value\"></div>\n    <div class='levelbody topdown' style='background:\"#FFFFCCf7\";'></div>\n    <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n   \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(!$(\"#level_\"+scope.$id)){\n            return\n        }\n        $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"height\",msg.payload+\"%\")\n        $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":500,"wires":[[]]},{"id":"a78d7f3c.66fc6","type":"ui_template","z":"bf0d83d32eec75c2","group":"19f5ed07.08a453","name":"simple-gauge css","order":3,"width":0,"height":0,"format":"<style id=\"simple-gauge\">\n\n.simple-gauge{\n    overflow:hidden;\n    position:relative;\n    width:100%;\n    height:100%;\n}\n.levelbody.side.right {\n    right:0;\n}\n.levelbody.side.left {\n    left:0;\n}\n.levelbody.side {\n    height:100%;\n    width:0%;\n}\n.levelbody.topdown {\n    bottom: unset;\n    top:0;\n}\n.levelbody.round {\n    height:100%;\n    width:100%;\n}\n.levelbody{\n    background: #FFFFCCf7;\n    height: 0%;\n    position: absolute;\n    width: 100%;\n    bottom: 0;\n    z-index:0;\n    transition: all 1s;\n    box-shadow: inset 0px 0px 10px 0px #00000080;\n}\n.bodywrap{\n    position: absolute;\n    clip-path: circle(50%);\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n}\n.levelframe.round{\n    border-radius:50%;\n}\n.levelframe{\n    position:absolute;\n    box-sizing:border-box;\n    background:transparent;\n    height:100%;\n    width: 100%;\n    border:1px solid #FFFFFF ;\n    box-shadow:inset 0px 0px 41px 0px #000000b5;\n    bottom:0;\n    z-index:1;\n}\n.leveltext{\n    top:30%;\n    position:relative;\n    width:100%;\n    text-align:center;\n    text-shadow: 0px 0px 9px #191938c2;\n    z-index:2;\n    mix-blend-mode: exclusion;\n}\n.leveltext.value{\n    font-size:25px;\n}\n.leveltext.title{\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":610,"y":620,"wires":[[]]},{"id":"ff079329.434ad","type":"ui_template","z":"bf0d83d32eec75c2","group":"19f5ed07.08a453","name":"simple level side","order":11,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n    <div class=\"leveltext title\">BLINDS</div>\n    <div class=\"leveltext value\"></div>\n    <div class='levelbody side' style='background:\"#FFFFCCf7\";'></div>\n    <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n   \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(!$(\"#level_\"+scope.$id)){\n            return\n        }\n        $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"width\",msg.payload+\"%\")\n        $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":460,"wires":[[]]},{"id":"e9e664c6.c84b48","type":"ui_template","z":"bf0d83d32eec75c2","group":"19f5ed07.08a453","name":"simple level double side","order":13,"width":"4","height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge\">\n    <div class=\"leveltext title\">CURTAINS</div>\n    <div class=\"leveltext value\"></div>\n    <div class='levelbody side left' style='background:\"#FFFFCCf7\";'></div>\n    <div class='levelbody side right' style='background:\"#FFFFCCf7\";'></div>\n    <div class='levelframe' style='border-color:\"#FFFFFF\"; border-width:6px;'></div>\n</div>\n\n<script>\n(function(scope) {\n   \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(!$(\"#level_\"+scope.$id)){\n            return\n        }\n        $(\"#level_\"+scope.$id).find(\".levelbody.side\").css(\"width\",(msg.payload/2)+\"%\")\n       \n        $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":420,"wires":[[]]},{"id":"6a797db2.668714","type":"ui_template","z":"bf0d83d32eec75c2","group":"3cd020e88fa644c5","name":"simple level blue round","order":10,"width":3,"height":3,"format":"<div id=\"{{'level_'+$id}}\" class=\"simple-gauge round\">\n    <div class=\"leveltext title\">LEVEL</div>\n    <div class=\"leveltext value\"></div>\n    <div class=bodywrap>\n    <div class='levelbody round' style='background:#2196f399;'></div>\n    </div>\n    <div class='levelframe round' style='border-color:#2196f3; border-width:2px;'></div>\n</div>\n<script>\n(function(scope) {\n   \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(!$(\"#level_\"+scope.$id)){\n            return\n        }\n        $(\"#level_\"+scope.$id).find(\".levelbody\").css(\"top\",(100-msg.payload)+\"%\")\n        $(\"#level_\"+scope.$id).find(\".value\").text(msg.payload+\"%\")\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":580,"wires":[[]]},{"id":"9f86e34f.b94b5","type":"random","z":"bf0d83d32eec75c2","name":"","low":1,"high":"100","inte":"true","property":"payload","x":380,"y":420,"wires":[["e9e664c6.c84b48"]]},{"id":"7ceb37db.bf6158","type":"random","z":"bf0d83d32eec75c2","name":"","low":1,"high":"100","inte":"true","property":"payload","x":380,"y":500,"wires":[["9139794a.12e668"]]},{"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: 1em auto;\n        align-content: center;\n        display: grid;\n        grid: auto-flow / repeat(3, 330px);\n        justify-content: center;\n        justify-items: center;\n        align-items: start;\n        gap: 0.5em;\n    }\n    .masonry-container > * {\n        position: relative;\n        left:unset !important;\n        top:unset!important;        \n    }\n\n    .masonry-container > ui-card-panel:has(> .ordered-1){\n        order:1;\n    }\n    .masonry-container > ui-card-panel:has(> .ordered-2){\n        order:4;\n    }\n    .masonry-container > ui-card-panel:has(> .ordered-3){\n        order:2;\n    }\n    .masonry-container > ui-card-panel:has(> .ordered-4){\n        order:5;\n    }\n    .masonry-container > ui-card-panel:has(> .ordered-5){\n        order:3;\n    }\n    .masonry-container > ui-card-panel:has(> .ordered-6){\n        order:6;\n    }\n\n    @media screen and (max-width: 1024px) {\n        .masonry-container {\n            grid: auto-flow / repeat(2, 330px);\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-1){\n            order:1;\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-2){\n            order:3;\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-3){\n            order:5;\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-4){\n            order:2;\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-5){\n            order:4;\n        }\n        .masonry-container > ui-card-panel:has(> .ordered-6){\n            order:6;\n        }\n    }\n\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":510,"y":220,"wires":[[]]},{"id":"7d38fc60032eac9c","type":"ui_numeric","z":"bf0d83d32eec75c2","name":"","label":"numeric","tooltip":"","group":"b5937d89450a68f6","order":0,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"className":"","x":360,"y":340,"wires":[[]]},{"id":"64d74175c19852ce","type":"ui_switch","z":"bf0d83d32eec75c2","name":"","label":"switch","tooltip":"","group":"02e7165d30fe7c8f","order":0,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":410,"y":380,"wires":[[]]},{"id":"674712f8d915bcc0","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":true,"className":"ordered-1"},{"id":"a0cb64ed7acda92f","type":"ui_group","name":"3. group","tab":"62083694d0eab7ca","order":3,"disp":true,"width":"6","collapse":true,"className":"ordered-3"},{"id":"3cd020e88fa644c5","type":"ui_group","name":"4. group","tab":"62083694d0eab7ca","order":4,"disp":true,"width":"6","collapse":true,"className":"ordered-4"},{"id":"19f5ed07.08a453","type":"ui_group","name":"2. group","tab":"62083694d0eab7ca","order":2,"disp":true,"width":"6","collapse":true,"className":"ordered-2"},{"id":"b5937d89450a68f6","type":"ui_group","name":"5. group","tab":"62083694d0eab7ca","order":5,"disp":true,"width":"6","collapse":true,"className":"ordered-5"},{"id":"02e7165d30fe7c8f","type":"ui_group","name":"6. group","tab":"62083694d0eab7ca","order":6,"disp":true,"width":"6","collapse":true,"className":"ordered-6"},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like