# Table surrounded by charts, misalignment due to sizing results?

**URL:** <https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059>\
**Category:** General\
**Created:** [14 July 2020 13:45 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059 "2020-07-14T13:45:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [14 July 2020 13:45 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/1 "2020-07-14T13:45:18Z")

</div>

Not sure who or whom this should be addressed to or by? But when a table surrounded by charts, misalignment due to sizing results.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4dcb4b579bc3e46e5dc90c7820db1b6f5d2c71de.png)  
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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 July 2020 16:36 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/2 "2020-07-14T16:36:01Z")

</div>

are you able to share enough of the flow so we can replicate this ?

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [14 July 2020 16:39 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/3 "2020-07-14T16:39:41Z")

</div>

Oh, I think so, or at least I can create a mimic of it.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [14 July 2020 17:01 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/4 "2020-07-14T17:01:35Z")

</div>

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.

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [27 July 2020 03:02 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/5 "2020-07-27T03:02:41Z")

</div>

Here is yet another scenario where the dashboard tab (automatic) alignment of ui\_groups fails (badly).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/26145f2f8b4d205d1ef0d08928379fc1ac0cd4ce.png)  
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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [27 July 2020 17:13 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/6 "2020-07-27T17:13:22Z")

</div>

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

```auto
[{"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}]

```

 ![Screen Shot 2020-07-27 at 1.11.40 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ee5fae717a5797823ab8bdd57b5372c3399189f.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [27 July 2020 17:58 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/7 "2020-07-27T17:58:48Z")

</div>

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

 ![Screen Shot 2020-07-27 at 1.56.50 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d3d8b146a7be173c0353603431be3763405d919.png)

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

 ![Screen Shot 2020-07-27 at 1.57.12 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/ebb466659683eebd42d84b8eba2f249b31b8bf89.png)

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [27 July 2020 20:42 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/8 "2020-07-27T20:42:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [27 July 2020 22:47 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/9 "2020-07-27T22:47:58Z")

</div>

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.

 ![Screen Shot 2020-07-27 at 6.46.23 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b35ebc4ce4d32cf206be493188ff70036e94050b.png)

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [28 July 2020 02:27 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/10 "2020-07-28T02:27:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [28 July 2020 09:37 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/11 "2020-07-28T09:37:24Z")

</div>

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

```auto
[{"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}]

```

 ![Screen Shot 2020-07-28 at 5.36.17 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c58c477c69d2114d0d6b26781e4ea2a0b92aac94.png)  
notice the alignment offset at the bottom of the page

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 July 2020 07:47 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/12 "2020-07-29T07:47:27Z")

</div>

Will try to have a look later.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 July 2020 23:18 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/13 "2020-07-29T23:18:05Z")

</div>

better version pushed to master.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [29 July 2020 23:41 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/14 "2020-07-29T23:41:19Z")

</div>

How to pull it from master to play with it?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 July 2020 08:02 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/15 "2020-07-30T08:02:44Z")

</div>

cd ~/.node-red && npm i node-red/node-red-dashboard

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [30 July 2020 08:42 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/16 "2020-07-30T08:42:29Z")

</div>

Looks great to me!

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [31 July 2020 04:20 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/17 "2020-07-31T04:20:21Z")

</div>

Thanks for working on this guys, appreciate it.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [31 July 2020 08:40 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/18 "2020-07-31T08:40:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [31 July 2020 13:09 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/19 "2020-07-31T13:09:27Z")

</div>

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

---

<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:** [29 September 2020 13:09 UTC](https://discourse.nodered.org/t/table-surrounded-by-charts-misalignment-due-to-sizing-results/30059/20 "2020-09-29T13:09:30Z")

</div>

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