Not sure who or whom this should be addressed to or by? But when a table surrounded by charts, misalignment due to sizing results.
In the above case the table (top left) and charts (right, bottom and bottom-right) are aligned in correct alignment and size in the layout edit view, but as you can see, when rendered in the ui view, not aligned.
are you able to share enough of the flow so we can replicate this ?
Oh, I think so, or at least I can create a mimic of it.
Here it is... you have to adjust your browser window, to force the chart objects to wrap down and around the table object, but once you do the misalignment happens. There is no way to adjust the height of the table, given the limited layout placement sizing, to adjust the misalignment.
[{"id":"ac18a1ad.e93a68","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"d95d6c1b.a4b868","type":"ui_table","z":"ac18a1ad.e93a68","group":"2f06c07a.317098","name":"Statistics","order":1,"width":7,"height":14,"columns":[{"field":"device","title":"Device","width":"60%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"ping","title":"Ping","width":"19%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"message","title":"Message","width":"19%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":680,"y":100,"wires":[]},{"id":"5b31cbb2.87041c","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Google","group":"25d9d7a5.4051c8","order":1,"width":7,"height":4,"label":"Google","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":140,"wires":[[]]},{"id":"1640434b.b81635","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Router","group":"c2c182bf.15a15","order":1,"width":7,"height":4,"label":"Router","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":180,"wires":[[]]},{"id":"6d9e16de.621938","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Wall","group":"a94f469e.84a3b","order":1,"width":7,"height":4,"label":"Wall","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":220,"wires":[[]]},{"id":"ad91afb6.73bd98","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Resource","group":"3d3c2662.a0435a","order":1,"width":7,"height":4,"label":"Resource","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":260,"wires":[[]]},{"id":"e09010d4.4c383","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Infrastructure","group":"ad6cdafc.e0c42","order":1,"width":7,"height":4,"label":"Infrastructure","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":700,"y":300,"wires":[[]]},{"id":"174a6ab4.33e725","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Portal","group":"8b6968af.59b708","order":1,"width":7,"height":4,"label":"Portal","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":380,"wires":[[]]},{"id":"6619be8f.827748","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Access","group":"2771b0a8.37171","order":1,"width":7,"height":4,"label":"Access","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":420,"wires":[[]]},{"id":"a0f46e57.6813f8","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Hall","group":"9fe88e45.5af59","order":1,"width":7,"height":4,"label":"Hall","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":460,"wires":[[]]},{"id":"45213d6.4dfbbc4","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Eccentric","group":"b78ce8bb.7f7fa8","order":1,"width":7,"height":4,"label":"Eccentric","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":340,"wires":[[]]},{"id":"4f8716ff.85702","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Pi4ModelB0","group":"f8328d5.8dd507","order":1,"width":7,"height":4,"label":"Pi4ModelB0","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":690,"y":540,"wires":[[]]},{"id":"3a83e7b6.2f27f8","type":"ui_chart","z":"ac18a1ad.e93a68","name":"Garage","group":"90441c6d.6891b","order":1,"width":7,"height":4,"label":"Garage","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":500,"wires":[[]]},{"id":"2f06c07a.317098","type":"ui_group","z":"","name":"Test","tab":"9c245fe7.e6f67","order":1,"disp":true,"width":7,"collapse":false},{"id":"25d9d7a5.4051c8","type":"ui_group","name":"Group 2","tab":"9c245fe7.e6f67","order":2,"disp":true,"width":7},{"id":"c2c182bf.15a15","type":"ui_group","name":"Group 3","tab":"9c245fe7.e6f67","order":3,"disp":true,"width":7},{"id":"a94f469e.84a3b","type":"ui_group","name":"Group 5","tab":"9c245fe7.e6f67","order":5,"disp":true,"width":7},{"id":"3d3c2662.a0435a","type":"ui_group","name":"Group 4","tab":"9c245fe7.e6f67","order":4,"disp":true,"width":7},{"id":"ad6cdafc.e0c42","type":"ui_group","name":"Group 12","tab":"9c245fe7.e6f67","order":12,"disp":true,"width":7},{"id":"8b6968af.59b708","type":"ui_group","name":"Group 10","tab":"9c245fe7.e6f67","order":10,"disp":true,"width":7},{"id":"2771b0a8.37171","type":"ui_group","name":"Group 9","tab":"9c245fe7.e6f67","order":9,"disp":true,"width":7},{"id":"9fe88e45.5af59","type":"ui_group","name":"Group 6","tab":"9c245fe7.e6f67","order":6,"disp":true,"width":7},{"id":"b78ce8bb.7f7fa8","type":"ui_group","name":"Group 11","tab":"9c245fe7.e6f67","order":11,"disp":true,"width":7},{"id":"f8328d5.8dd507","type":"ui_group","name":"Group 8","tab":"9c245fe7.e6f67","order":8,"disp":true,"width":7},{"id":"90441c6d.6891b","type":"ui_group","name":"Group 7","tab":"9c245fe7.e6f67","order":7,"disp":true,"width":7},{"id":"9c245fe7.e6f67","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":8,"disabled":false,"hidden":false}]
If you play with it a bit you can even get the chart object below the table, to draw ON TOP of the table object, such that it hides part of the table.
Here is yet another scenario where the dashboard tab (automatic) alignment of ui_groups fails (badly).
One of the ui_groups is different size then its peers, so the ui_table objects get stepped on visually. As do the larger ui_groups are partially hidden, a button groups have 6 buttons but right most 2, only show 4 buttons each, others hidden by table.
I think the issue is that the ui-table node is not quite the full size. If you add this ui-template node to the page, you will see it draw a 1px read border around all the containers and the table node is not quite the right size causing a shift
[{"id":"c9a14525.2063f8","type":"ui_template","z":"cebba83b.614a98","group":"c1d6c61e.40ca4","name":"","order":1,"width":0,"height":0,"format":"<style>\n.nr-dashboard-cardcontainer {\nborder: red 1px solid;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":240,"y":220,"wires":[[]]},{"id":"c1d6c61e.40ca4","type":"ui_group","z":"","name":"Test","tab":"d0a929fa.ecbc9","order":12,"disp":true,"width":7,"collapse":false},{"id":"d0a929fa.ecbc9","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
I stand corrected, it has something to do with the group names. If you remove the group names and the size heights are multiples of each other, they line up properly - here the first column hight is 12, the second is 12 and the next 3 have a height of 4 and it looks like this
This image is the screen shrunk to display 2 columns and you can see the first two groups align, the 2secon 2 align but it goes off on the third 2.
this is the issue with responsive websites
So... is this something that can be fixed via code update to ui_table? Or is this just the ui_table code is tripped up by browser?
Nah it has nothing to due with the ui-table. In this example I set 'Google' to a height of 7 and 'Router' to a height of 3 and 'Wall' to a height of 4 and you can see the difference.
Well, I have found several scenarios where objects overlap, are hidden by each other, etc. So, is this something that can or should be fixed? Guess just wondering what the next step is?
@dceejay any comments?
Here is the simplified flow showing the 'issue' - it seems (to me) to revolve around the amount of space the 'Group Title' takes up.
[{"id":"11e6e467.595fcc","type":"tab","label":"dashboard Alignment issue","disabled":false,"info":""},{"id":"2335b5c1.c44f62","type":"ui_chart","z":"11e6e467.595fcc","name":"Google","group":"eb733c60.f9fed8","order":1,"width":7,"height":"6","label":"Google (6)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":140,"wires":[[]]},{"id":"8a749d5d.3bf1","type":"ui_chart","z":"11e6e467.595fcc","name":"Router","group":"884f3bf3.9068c8","order":1,"width":7,"height":"3","label":"Router (3)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":180,"wires":[[]]},{"id":"46ad6246.1eb0cc","type":"ui_chart","z":"11e6e467.595fcc","name":"Wall","group":"13530182.add5a6","order":1,"width":7,"height":"7","label":"Wall (7)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":300,"wires":[[]]},{"id":"6de8e48e.8572a4","type":"ui_chart","z":"11e6e467.595fcc","name":"Resource","group":"89d4f97d.bb5c58","order":1,"width":7,"height":"3","label":"Resource (3)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":220,"wires":[[]]},{"id":"c56f2008.a17a6","type":"ui_chart","z":"11e6e467.595fcc","name":"Hall","group":"eff89811.5baf08","order":1,"width":7,"height":"3","label":"Hall (3)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":340,"wires":[[]]},{"id":"e5249ea4.cd732","type":"ui_chart","z":"11e6e467.595fcc","name":"Garage","group":"d62f3e4f.7090f","order":1,"width":7,"height":"3","label":"Garage (3)","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"One moment Please...","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":680,"y":380,"wires":[[]]},{"id":"132cdba2.a907e4","type":"ui_template","z":"11e6e467.595fcc","group":"eb733c60.f9fed8","name":"","order":2,"width":0,"height":0,"format":"<style>\n.nr-dashboard-cardcontainer > .visible {\nbackground-color: pink !important;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":360,"y":160,"wires":[[]]},{"id":"8367db0b.128338","type":"inject","z":"11e6e467.595fcc","name":"","topic":"","payload":"35","payloadType":"num","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":310,"y":280,"wires":[["2335b5c1.c44f62","8a749d5d.3bf1","46ad6246.1eb0cc","6de8e48e.8572a4","c56f2008.a17a6","e5249ea4.cd732"]]},{"id":"eb733c60.f9fed8","type":"ui_group","z":"","name":"Group 1","tab":"d929b645.db66e8","order":1,"disp":false,"width":"7","collapse":false},{"id":"884f3bf3.9068c8","type":"ui_group","z":"","name":"Group 2","tab":"d929b645.db66e8","order":2,"disp":false,"width":"7","collapse":false},{"id":"13530182.add5a6","type":"ui_group","z":"","name":"Group A","tab":"d929b645.db66e8","order":4,"disp":true,"width":"7","collapse":false},{"id":"89d4f97d.bb5c58","type":"ui_group","z":"","name":"Group 3","tab":"d929b645.db66e8","order":3,"disp":false,"width":"7","collapse":false},{"id":"eff89811.5baf08","type":"ui_group","z":"","name":"Group B","tab":"d929b645.db66e8","order":5,"disp":true,"width":"7","collapse":false},{"id":"d62f3e4f.7090f","type":"ui_group","z":"","name":"Group C","tab":"d929b645.db66e8","order":6,"disp":true,"width":"7","collapse":false},{"id":"d929b645.db66e8","type":"ui_tab","z":"","name":"dashboard Alignment","icon":"dashboard","order":8,"disabled":false,"hidden":false}]
notice the alignment offset at the bottom of the page
Will try to have a look later.
better version pushed to master.
1 Like
How to pull it from master to play with it?
cd ~/.node-red && npm i node-red/node-red-dashboard
1 Like
Looks great to me!
Thanks for working on this guys, appreciate it.
Note- this will only fix the slight misalignment - it is still possible to confuse the layout engine at the larger scale with odd sized objects needing to be packed - it is a long standing issue that needs a more capable brain than mine.
Right, it was the slight misalignment issue that for me was the priority issue. The gross overlap scenario is easier to avoid, at least in my case it is such.
I thought of an idea, why not implement a static alignment or pin to grid feature? for all objects on a tab, like you do for objects within a given UI groups? The only dynamic element would be collapse feature, that would only shift things in that single vertical vector, if the object below was same frame size? Yes this would not be as flexible as what is now in place now, but it would give a designer a consistent placement option, along with the dynamic placement feature we have now.. I think consistent placement as a feature might be of value, and it would seem to be easy to implement?
Another idea is using anchor points, like OS UIs allow within window frames. So you could pin an UI group to 1 or more of the 4 vendors, top, bottom, left or right. This would be useful if I wanted a given UI group to always be at the bottom of a tab, while non-anchored UI groups would float above dynamically as is the function now. The idea of anchor points is something I would definitely leverage. :).
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
