A "simple" CSS position issue?

General
1

Putting out an SOS on an frustrating issue i'm having with the UI Template & positioning my groups.
Here's the flow:

[{"id":"3e588bb4.6427e4","type":"ui_template","z":"37005b7e.7f759c","group":"a59619e6.127c48","name":"O-Box","order":1,"width":5,"height":9,"format":"<!DOCTYPE html>\n<html>\n\n<style>\n#Test {\n    display: flex;\n    float: center;\n    width: 1920px;\n}\n#Test_Panel1 {\n    display: flex;\n    float: center;\n    height: 502px;\n    width: 813px;\n    border: 1px solid #ffffff;\n    padding: 10px;\n    position: static;\n    margin-top: 5px;\n    margin-left: 5px;\n    margin-right: 5px;\n    margin-bottom: 5px;\n}\n</style>\n\n</html>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":640,"wires":[[]],"icon":"node-red-dashboard/ui_switch.png"},{"id":"e05b1101.e0b33","type":"ui_template","z":"37005b7e.7f759c","group":"e2468ce4.2c341","name":"I-Box","order":1,"width":16,"height":8,"format":"<!DOCTYPE html>\n<html>\n    \n<style>\n#Test_Panel2 {\n    display: flex;\n    float: left;\n    height: 454px;\n    width: 813px;\n    border: 1px solid #ffffff;\n    padding: 10px;\n    position: static;\n    margin-top: 0px;\n    margin-left: 5px;\n    margin-right: 5px;\n    margin-bottom: 5px;\n}\n</style>\n\n</html>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":680,"wires":[[]],"icon":"font-awesome/fa-info-circle"},{"id":"c34dc90f.e90a08","type":"ui_template","z":"37005b7e.7f759c","group":"10edc74b.d84669","name":"W-Box","order":2,"width":20,"height":"17","format":"<!DOCTYPE html>\n<html>\n\n<style>\n#Test_Panel3 {\n    \n    float: right;\n    height: 983px;\n    width: 1038px;\n    border: 1px solid #ffffff;\n    padding: 10px;\n    position: static;\n    margin-top: 5px;\n    margin-left: 0px;\n    margin-right: 5px;\n    margin-bottom: 5px;\n}\n</style>\n\n</html>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":720,"wires":[[]],"inputLabels":["B64 Format"],"icon":"font-awesome/fa-file-image-o"},{"id":"a59619e6.127c48","type":"ui_group","z":"","name":"Panel1","tab":"32694a66.f815a6","order":1,"disp":false,"width":"16","collapse":false},{"id":"e2468ce4.2c341","type":"ui_group","z":"","name":"Panel2","tab":"32694a66.f815a6","order":2,"disp":false,"width":"16","collapse":false},{"id":"10edc74b.d84669","type":"ui_group","z":"","name":"Panel3","tab":"32694a66.f815a6","order":3,"disp":false,"width":"20","collapse":false},{"id":"32694a66.f815a6","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

All i want to do is have all three group elements on ONE page & can't understand why I can't fit the 3rd panel in(WITHOUT having a page-sized gap/margin at the bottom). I've tried using different combo's of 'display', 'position' & 'float' & have had them aligned, when i using 'minus' margin values, but ALWAYS extends the page(even though the width/height is within the page threshold!?).

I've read MANY articles, gone through tutorials that work on the browser...but not when in Node-Red!? PLEASE any help as to WHY this "simple" task seems so taxing, its draining my will to live.... :frowning:

2

You have defined the groups so big that they do not even fit my screen. So I couldn't really understand what you are trying to do.
But I think you trying to force the card layout from inside out. I don't think it is even possible that way.
If you need some really specific layout for your dashboard and the card layout doesn't let you to achieve this, you better take advantage of ui-builder and make all from scratch. Otherwise it is reasonable to respect the card layout system and make your stuff to fit into it.

3

Another alternative to force the layout is to put all the widgets in one group rather than splitting them.

4

I think I've realized my error. I was using the node-red 'body' as the border for the three groups, when i should create a 'div' to contain them(as 'div' not groups) within the 'body' parameters. :roll_eyes: I'm going to experiment with the UI Builder after this project, so thanks for the suggestion, hotNipi. Colin's method will suffice for this problem. I've overcome more complex issues with scripts contained within these groups...think i was overthinking the issue & couldn't see the wood for the trees, so I thank you both for bringing me back to ground level. :thinking:

5

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