Buttons may position incorrectly

[PKGeorgiev]

Recently I upgraded from 2.1.0 to 2.4.0. On my dashboard I have many charts and one button. When I resize the browser the dashboard elements do re-arrange. But the button is position on a strange location:

Here is button's config:

Additional info:

Running on RPi3 Linux 4.9.24-v7+ (raspbian) node -v: v6.10.3 NodeRed 0.16 Dashboard v2.4 Tested on: IE11, MS Edge 38.14393.1066.0 (EdgeHTML 14.14393), Chrome 58.0.3029.110

[dceejay]

Hi I don't suppose that you can share the actual flow code (or the dashboard elements) with me can you ?

[PKGeorgiev]

@dceejay I can share my flows. Can I send them on the mail specified in dashboard's package.json? Can you advise me how to export all flows at once? Because I can only see an option to select nodes and export them flow by flow (I have many flows)?

[dceejay]

in your /home/pi/.node-red directory will be a flows_{your hostname}.json file... that is the complete flow (not including credentials... don't send creds)

[Nodi-Rubrum]

Still need examples of overlap issues? Is this issue bubbling up to be addressed any time soon? Moreover, is there any know workaround for when this happens?

If so, I have a flow that works in Microsoft Edge (latest), works in Chrome (latest), but fails to place buttons correctly in FireFox (latest).

FireFox 80.0.1 64 bit on Windows 10 Chrome 85.0.4183.83 (Official Build) (64-bit) on Windows 10 Microsoft Edge 85.0.564.44 (Official build) (64-bit) on Windows 10

Flow... [{"id":"88dd7657.7ef888","type":"tab","label":"Cable Monitor 0.0.3","disabled":false,"info":""},{"id":"66bf1646.84164","type":"inject","z":"88dd7657.7ef888","name":"Device","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"cmHelpData","payload":"","payloadType":"date","x":280,"y":100,"wires":[["9c2dbd04.94f648"]]},{"id":"e19261d2.47ec58","type":"inject","z":"88dd7657.7ef888","name":"Log","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"cmLogsData","payload":"","payloadType":"date","x":270,"y":180,"wires":[["7f717fd6.7b0d18"]]},{"id":"97404c9b.f612c8","type":"inject","z":"88dd7657.7ef888","name":"Configuration","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"cmConfigData","payload":"","payloadType":"date","x":260,"y":260,"wires":[["fbfbd17e.092078"]]},{"id":"1e62c4e2.64073b","type":"inject","z":"88dd7657.7ef888","name":"Addresses","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"cmAddressData","payload":"","payloadType":"date","x":270,"y":340,"wires":[["97eab2ef.1332f"]]},{"id":"7af09561.8908a4","type":"inject","z":"88dd7657.7ef888","name":"Signal","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"cmSignalData","payload":"","payloadType":"date","x":270,"y":420,"wires":[["da6d6c1e.218f4"]]},{"id":"ca9b8467.b82858","type":"http request","z":"88dd7657.7ef888","name":"Request","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://cable.dachshund-digital.org/{{topic}}.htm","tls":"","persist":false,"proxy":"","authType":"","x":840,"y":280,"wires":[["c62db289.502388"]]},{"id":"1fcf687a.19db9","type":"inject","z":"88dd7657.7ef888","name":"Status","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"indexData","payload":"","payloadType":"date","x":280,"y":500,"wires":[["bdba143f.786648"]]},{"id":"a292a910.f92e5","type":"debug","z":"88dd7657.7ef888","name":"Message","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1380,"y":380,"wires":[]},{"id":"c62db289.502388","type":"switch","z":"88dd7657.7ef888","name":"Status?","property":"statusCode","propertyType":"msg","rules":[{"t":"eq","v":"200","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1000,"y":280,"wires":[["338d291.92805d6"],["48dfc622.93a098"]]},{"id":"9c2dbd04.94f648","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":80,"wires":[]},{"id":"9d0129d4.13cdf","type":"link in","z":"88dd7657.7ef888","name":"","links":["9c2dbd04.94f648","b76cc41f.3a8bb8","7f717fd6.7b0d18","fbfbd17e.092078","97eab2ef.1332f","da6d6c1e.218f4","bdba143f.786648"],"x":715,"y":280,"wires":[["ca9b8467.b82858"]]},{"id":"7f717fd6.7b0d18","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":160,"wires":[]},{"id":"fbfbd17e.092078","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":240,"wires":[]},{"id":"97eab2ef.1332f","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":320,"wires":[]},{"id":"da6d6c1e.218f4","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":400,"wires":[]},{"id":"bdba143f.786648","type":"link out","z":"88dd7657.7ef888","name":"","links":["9d0129d4.13cdf"],"x":375,"y":480,"wires":[]},{"id":"d0a9c1cb.07c65","type":"switch","z":"88dd7657.7ef888","name":"Page","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"cmHelpData","vt":"str"},{"t":"eq","v":"cmLogsData","vt":"str"},{"t":"eq","v":"cmConfigData","vt":"str"},{"t":"eq","v":"cmAddressData","vt":"str"},{"t":"eq","v":"cmSignalData","vt":"str"},{"t":"eq","v":"indexData","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":7,"x":1310,"y":260,"wires":[["6837b56.a439dcc"],["bc6a44ef.920178"],["bc074833.ba18d"],["e509166d.66cb18"],["ae1ba02c.b1c8a8"],["3742f191.e98a46"],["9ade57ff.9416b"]]},{"id":"320d19d4.32c6be","type":"link in","z":"88dd7657.7ef888","name":"","links":["48dfc622.93a098","9ade57ff.9416b","1a13bff3.22dd2","cf59e80e.71ea4"],"x":1255,"y":380,"wires":[["a292a910.f92e5"]]},{"id":"48dfc622.93a098","type":"link out","z":"88dd7657.7ef888","name":"","links":["320d19d4.32c6be"],"x":1115,"y":300,"wires":[]},{"id":"338d291.92805d6","type":"link out","z":"88dd7657.7ef888","name":"","links":["c792f18f.84ea8"],"x":1115,"y":260,"wires":[]},{"id":"c792f18f.84ea8","type":"link in","z":"88dd7657.7ef888","name":"","links":["338d291.92805d6"],"x":1195,"y":260,"wires":[["d0a9c1cb.07c65"]]},{"id":"c514b97.9089348","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":640,"wires":[["8d4e6881.d987e8"]]},{"id":"8d4e6881.d987e8","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const DATA = msg.payload;\n\nmsg.operations = [\n {\n \"operation\": \"Time And Date\", // DATA[17]\n \"value\": DATA[17]\n },\n {\n \"operation\": DATA[18],\n \"value\": DATA[19]\n }\n];\n\nmsg.tasks = [\n {\n \"task\": DATA[0],\n \"status\": DATA[1] \n },\n {\n \"task\": DATA[2],\n \"status\": DATA[3]\n },\n {\n \"task\": DATA[4],\n \"status\": DATA[5]\n },\n {\n \"task\": DATA[6],\n \"status\": DATA[7]\n },\n {\n \"task\": DATA[8],\n \"status\": DATA[9]\n },\n {\n \"task\": DATA[10],\n \"status\": DATA[11]\n },\n {\n \"task\": DATA[12],\n \"status\": DATA[13]\n },\n {\n \"task\": DATA[14],\n \"status\": DATA[15]\n }\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":640,"wires":[["55d43b97.2f74d4","97d9e5ff.42cb2"]],"outputLabels":["Operations"]},{"id":"cb10aed8.4ec27","type":"ui_table","z":"88dd7657.7ef888","group":"e0d9071b.8bcd7","name":"Operations","order":2,"width":8,"height":1,"columns":[{"field":"operation","title":"Operation","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"value","title":"Value","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":640,"y":620,"wires":[]},{"id":"85500f36.2134c","type":"ui_table","z":"88dd7657.7ef888","group":"e0d9071b.8bcd7","name":"Tasks","order":1,"width":8,"height":5,"columns":[{"field":"task","title":"Task","width":"75%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"status","title":"Status","width":"25%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":580,"y":660,"wires":[]},{"id":"55d43b97.2f74d4","type":"change","z":"88dd7657.7ef888","name":"Operaions","rules":[{"t":"set","p":"payload","pt":"msg","to":"[operations]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":620,"wires":[["cb10aed8.4ec27"]]},{"id":"97d9e5ff.42cb2","type":"change","z":"88dd7657.7ef888","name":"Tasks","rules":[{"t":"set","p":"payload","pt":"msg","to":"[tasks]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":660,"wires":[["85500f36.2134c"]]},{"id":"3742f191.e98a46","type":"link out","z":"88dd7657.7ef888","name":"","links":["9fe27312.d52e1"],"x":1455,"y":300,"wires":[]},{"id":"9fe27312.d52e1","type":"link in","z":"88dd7657.7ef888","name":"","links":["3742f191.e98a46"],"x":35,"y":640,"wires":[["c514b97.9089348"]]},{"id":"21af3aaf.cc10ae","type":"ui_button","z":"88dd7657.7ef888","name":"Status","group":"e0d9071b.8bcd7","order":4,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"indexData","x":270,"y":460,"wires":[["bdba143f.786648"]]},{"id":"f86bcf90.ca2078","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":840,"wires":[["8301dcbb.60146"]]},{"id":"8301dcbb.60146","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const DATA = msg.payload;\n\nmsg.down = [\n {\n \"downstream\": DATA[0], \"bond\": DATA[1], \"1\": DATA[2], \"2\": DATA[3], \"3\": DATA[4], \"4\": DATA[5], \"5\": DATA[6], \"6\": DATA[7], \"7\": DATA[8]\n },\n {\n \"downstream\": DATA[9], \"bond\": DATA[10], \"1\": DATA[11], \"2\": DATA[12], \"3\": DATA[13], \"4\": DATA[14], \"5\": DATA[15], \"6\": DATA[16], \"7\": DATA[17]\n },\n {\n \"downstream\": DATA[18], \"bond\": DATA[19], \"1\": DATA[20], \"2\": DATA[21], \"3\": DATA[22], \"4\": DATA[23], \"5\": DATA[24], \"6\": DATA[25], \"7\": DATA[26]\n },\n {\n \"downstream\": DATA[27], \"bond\": DATA[28], \"1\": DATA[29], \"2\": DATA[30], \"3\": DATA[31], \"4\": DATA[32], \"5\": DATA[33], \"6\": DATA[34], \"7\": DATA[35]\n },\n {\n \"downstream\": \"Power Level\", \"bond\": DATA[38], \"1\": DATA[39], \"2\": DATA[40], \"3\": DATA[41], \"4\": DATA[42], \"5\": DATA[43], \"6\": DATA[44], \"7\": DATA[45]\n }\n];\n\nmsg.up = [\n {\n \"uptream\": DATA[46], \"bond\": DATA[47], \"1\": DATA[48], \"2\": DATA[49], \"3\": DATA[50], \n },\n {\n \"upstream\": DATA[51], \"bond\": DATA[52], \"1\": DATA[53], \"2\": DATA[54], \"3\": DATA[55],\n },\n {\n \"upstream\": DATA[56], \"bond\": DATA[57], \"1\": DATA[58], \"2\": DATA[59], \"3\": DATA[60],\n },\n {\n \"upstream\": DATA[61], \"bond\": DATA[62], \"1\": DATA[63], \"2\": DATA[64], \"3\": DATA[65],\n },\n {\n \"upstream\": DATA[66], \"bond\": DATA[67], \"1\": DATA[68], \"2\": DATA[69], \"3\": DATA[70]\n },\n {\n \"upstream\": DATA[71], \"bond\": DATA[72], \"1\": DATA[73], \"2\": DATA[74], \"3\": DATA[75]\n },\n {\n \"upstream\": DATA[76], \"bond\": DATA[77], \"1\": DATA[78], \"2\": DATA[79], \"3\": DATA[80]\n }\n];\n\nmsg.statistic = [\n {\n \"signal\": DATA[81], \"bond\": DATA[82], \"1\": DATA[83], \"2\": DATA[84], \"3\": DATA[85], \"4\": DATA[86], \"5\": DATA[87], \"6\": DATA[88], \"7\": DATA[89]\n },\n {\n \"signal\": DATA[90], \"bond\": DATA[91], \"1\": DATA[92], \"2\": DATA[93], \"3\": DATA[94], \"4\": DATA[95], \"5\": DATA[96], \"6\": DATA[97], \"7\": DATA[98]\n },\n {\n \"signal\": DATA[99], \"bond\": DATA[100], \"1\": DATA[101], \"2\": DATA[102], \"3\": DATA[103], \"4\": DATA[104], \"5\": DATA[105], \"6\": DATA[106], \"7\": DATA[107]\n },\n {\n \"signal\": DATA[108], \"bond\": DATA[109], \"1\": DATA[110], \"2\": DATA[111], \"3\": DATA[112], \"4\": DATA[113], \"5\": DATA[114], \"6\": DATA[115], \"7\": DATA[116]\n }\n];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":840,"wires":[["85305c51.cb30e","8705bf07.5d2f88","8120aa8c.f0462"]],"outputLabels":["Operations"]},{"id":"d3045c7b.d7a978","type":"link in","z":"88dd7657.7ef888","name":"","links":["ae1ba02c.b1c8a8"],"x":35,"y":840,"wires":[["f86bcf90.ca2078"]]},{"id":"ae1ba02c.b1c8a8","type":"link out","z":"88dd7657.7ef888","name":"","links":["d3045c7b.d7a978"],"x":1415,"y":280,"wires":[]},{"id":"9ade57ff.9416b","type":"link out","z":"88dd7657.7ef888","name":"","links":["320d19d4.32c6be"],"x":1415,"y":320,"wires":[]},{"id":"c5329eb9.e9496","type":"ui_button","z":"88dd7657.7ef888","name":"Signal","group":"e304839f.d7b0f","order":5,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"cmSignalData","x":270,"y":380,"wires":[["da6d6c1e.218f4"]]},{"id":"28296453.9cb19c","type":"ui_table","z":"88dd7657.7ef888","group":"e304839f.d7b0f","name":"Downstream","order":1,"width":24,"height":4,"columns":[{"field":"downstream","title":"Downstream","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"bond","title":"Bonding<br>Channel 0","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"1","title":"<br>1","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"2","title":"<br>2","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"3","title":"<br>3","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"4","title":"<br>4","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"5","title":"<br>5","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"6","title":"<br>6","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"7","title":"<br>7","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":610,"y":800,"wires":[]},{"id":"85305c51.cb30e","type":"change","z":"88dd7657.7ef888","name":"Downstream","rules":[{"t":"set","p":"payload","pt":"msg","to":"[down]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":800,"wires":[["28296453.9cb19c"]]},{"id":"8705bf07.5d2f88","type":"change","z":"88dd7657.7ef888","name":"Upstream","rules":[{"t":"set","p":"payload","pt":"msg","to":"[up]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":840,"wires":[["26db4678.85ceb2"]]},{"id":"26db4678.85ceb2","type":"ui_table","z":"88dd7657.7ef888","group":"e304839f.d7b0f","name":"Upstream","order":2,"width":24,"height":5,"columns":[{"field":"upstream","title":"Upstream","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"bond","title":"Bonding<br>Channel 0","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"1","title":"<br>1","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"2","title":"<br>2","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"3","title":"<br>3","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":600,"y":840,"wires":[]},{"id":"e9db2a97.391948","type":"ui_table","z":"88dd7657.7ef888","group":"e304839f.d7b0f","name":"Statistics","order":3,"width":24,"height":4,"columns":[{"field":"signal","title":"Statistics (Code Words)","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"bond","title":"Bonding<br>Channel 0","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"1","title":"<br>1","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"2","title":"<br>2","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"3","title":"<br>3","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"4","title":"<br>4","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"5","title":"<br>5","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"6","title":"<br>6","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"7","title":"<br>7","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":600,"y":880,"wires":[]},{"id":"8120aa8c.f0462","type":"change","z":"88dd7657.7ef888","name":"Upstream","rules":[{"t":"set","p":"payload","pt":"msg","to":"[statistic]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":880,"wires":[["e9db2a97.391948"]]},{"id":"480f2d49.fe310c","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":980,"wires":[["ed5be249.86cfc8"]]},{"id":"ed5be249.86cfc8","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const DATA = msg.payload;\n\nmsg.static = [\n {\n \"item\": DATA[0],\n \"value\": DATA[1]\n },\n {\n \"item\": DATA[2],\n \"value\": DATA[3]\n },\n {\n \"item\": DATA[4],\n \"value\": DATA[5]\n },\n {\n \"item\": DATA[6],\n \"value\": DATA[7]\n }\n];\n\nmsg.dynamic = [\n {\n \"index\": DATA[8].toString().trim(),\n \"known\": DATA[9],\n \"status\": DATA[10]\n }\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":980,"wires":[["9aa0cf1a.426ab","d2bceaa8.2d5748"]],"outputLabels":["Operations"]},{"id":"206c0bf3.29a444","type":"ui_table","z":"88dd7657.7ef888","group":"ee56c5cc.35c9e","name":"Static","order":1,"width":8,"height":3,"columns":[{"field":"item","title":"Item","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"value","title":"Value","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":590,"y":960,"wires":[]},{"id":"c91893fd.5180a","type":"ui_table","z":"88dd7657.7ef888","group":"ee56c5cc.35c9e","name":"Dynamic","order":2,"width":8,"height":2,"columns":[{"field":"index","title":"#","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"known","title":"Known CPE MAC Address","width":"65%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"status","title":"Status","width":"25%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":620,"y":1000,"wires":[]},{"id":"9aa0cf1a.426ab","type":"change","z":"88dd7657.7ef888","name":"Static","rules":[{"t":"set","p":"payload","pt":"msg","to":"[static]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":960,"wires":[["206c0bf3.29a444"]]},{"id":"d2bceaa8.2d5748","type":"change","z":"88dd7657.7ef888","name":"Dynamic","rules":[{"t":"set","p":"payload","pt":"msg","to":"[dynamic]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1000,"wires":[["c91893fd.5180a"]]},{"id":"a3d93d1a.fbd008","type":"link in","z":"88dd7657.7ef888","name":"","links":["e509166d.66cb18"],"x":35,"y":980,"wires":[["480f2d49.fe310c"]]},{"id":"e509166d.66cb18","type":"link out","z":"88dd7657.7ef888","name":"","links":["a3d93d1a.fbd008"],"x":1455,"y":260,"wires":[]},{"id":"8f4ffb0e.663248","type":"ui_button","z":"88dd7657.7ef888","name":"Addresses","group":"ee56c5cc.35c9e","order":4,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"cmAddressData","x":250,"y":300,"wires":[["97eab2ef.1332f"]]},{"id":"d0edcdc8.f46ed","type":"ui_button","z":"88dd7657.7ef888","name":"Configuration","group":"8aceaaa1.29876","order":3,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"cmConfigData","x":240,"y":220,"wires":[["fbfbd17e.092078"]]},{"id":"bc074833.ba18d","type":"link out","z":"88dd7657.7ef888","name":"","links":["46c32f71.caa76"],"x":1415,"y":240,"wires":[]},{"id":"8caa9a4a.a5f7a","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":1080,"wires":[["a5cca187.01bf1"]]},{"id":"a5cca187.01bf1","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const DATA = msg.payload;\n\nmsg.configuration = [\n {\n \"item\": DATA[0],\n \"value\": DATA[1]\n },\n {\n \"item\": DATA[2],\n \"value\": DATA[3]\n },\n {\n \"item\": DATA[4],\n \"value\": DATA[5]\n },\n {\n \"item\": DATA[6],\n \"value\": DATA[7]\n },\n {\n \"item\": DATA[8],\n \"value\": DATA[9]\n },\n {\n \"item\": DATA[10],\n \"value\": DATA[11]\n }\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":1080,"wires":[["6993436a.b7867c"]],"outputLabels":["Operations"]},{"id":"450f5247.50fdd4","type":"ui_table","z":"88dd7657.7ef888","group":"8aceaaa1.29876","name":"Configuration","order":1,"width":10,"height":4,"columns":[{"field":"item","title":"Item","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"value","title":"Value","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":660,"y":1080,"wires":[]},{"id":"6993436a.b7867c","type":"change","z":"88dd7657.7ef888","name":"Configuration","rules":[{"t":"set","p":"payload","pt":"msg","to":"[configuration]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":1080,"wires":[["450f5247.50fdd4"]]},{"id":"46c32f71.caa76","type":"link in","z":"88dd7657.7ef888","name":"","links":["bc074833.ba18d"],"x":35,"y":1080,"wires":[["8caa9a4a.a5f7a"]]},{"id":"95a3c0fa.d5a74","type":"ui_button","z":"88dd7657.7ef888","name":"Device","group":"b92090f0.78b378","order":3,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"cmHelpData","x":270,"y":60,"wires":[["9c2dbd04.94f648"]]},{"id":"6837b56.a439dcc","type":"link out","z":"88dd7657.7ef888","name":"","links":["58151c58.cd1a14"],"x":1415,"y":200,"wires":[]},{"id":"e5f74519.228a4","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":1160,"wires":[["7ef07d7.3b96684"]]},{"id":"7ef07d7.3b96684","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const DATA = msg.payload[0].trim().split(\"\\n\");\nmsg.data = DATA;\n\nvar theModel = DATA[0].trim().split(':'),\n theVendor = DATA[1].trim().split(':'),\n theName = DATA[2].trim().split(':'),\n theBoot = DATA[4].trim().split(':'),\n theHardware = DATA[5].trim().split(':'),\n theSerial = DATA[6].trim().split(':'),\n theBuild = DATA[7].trim().split(':');\n\nmsg.device = [\n {\n 'item': theModel[0],\n 'value': theModel[1]\n },\n {\n 'item': theVendor[0],\n 'value': theVendor[1]\n },\n {\n 'item': theName[0],\n 'value': theName[1]\n },\n {\n 'item': theBoot[0],\n 'value': theBoot[1]\n },\n {\n 'item': theHardware[0],\n 'value': theHardware[1]\n },\n {\n 'item': theSerial[0],\n 'value': theSerial[1]\n },\n {\n 'item': theBuild[0],\n 'value': theBuild[1]\n },\n];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":1160,"wires":[["17ec77fe.678db"]],"outputLabels":["Operations"]},{"id":"339b7ada.0d149e","type":"ui_table","z":"88dd7657.7ef888","group":"b92090f0.78b378","name":"Device","order":1,"width":8,"height":5,"columns":[{"field":"item","title":"Item","width":"40%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"value","title":"Value","width":"60%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":570,"y":1160,"wires":[]},{"id":"17ec77fe.678db","type":"change","z":"88dd7657.7ef888","name":"Device","rules":[{"t":"set","p":"payload","pt":"msg","to":"[device]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":1160,"wires":[["339b7ada.0d149e"]]},{"id":"58151c58.cd1a14","type":"link in","z":"88dd7657.7ef888","name":"","links":["6837b56.a439dcc"],"x":35,"y":1160,"wires":[["e5f74519.228a4"]]},{"id":"411d459e.44d61c","type":"ui_button","z":"88dd7657.7ef888","name":"Log","group":"e215a6ff.af52c8","order":3,"width":2,"height":1,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"cmLogsData","x":270,"y":140,"wires":[["7f717fd6.7b0d18"]]},{"id":"bc6a44ef.920178","type":"link out","z":"88dd7657.7ef888","name":"","links":["2be76a2b.9df83e"],"x":1455,"y":220,"wires":[]},{"id":"3a427ce7.219734","type":"html","z":"88dd7657.7ef888","name":"Tables","property":"payload","outproperty":"payload","tag":"td","ret":"text","as":"single","x":150,"y":1240,"wires":[["28693d6f.e41d22"]]},{"id":"28693d6f.e41d22","type":"function","z":"88dd7657.7ef888","name":"Parse","func":"const THREE = 3,\n ZERO = 0,\n ONE = 1,\n TWO = 2\n FOUR = 4;\n \nconst DATA = msg.payload;\n\nlet theLogs = [];\n\nfor (var theIndex = ZERO; theIndex < (DATA.length); theIndex += FOUR) {\n\n var theLog = {\n 'message': DATA[theIndex + THREE],\n 'code': DATA[theIndex + TWO],\n 'time': DATA[theIndex],\n 'priority': DATA[theIndex + ONE]\n };\n \n theLogs.push(theLog);\n}\n\nmsg.log = theLogs;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":290,"y":1240,"wires":[["de3101bb.82e3b"]],"outputLabels":["Operations"]},{"id":"3e53c6e5.c9081a","type":"ui_table","z":"88dd7657.7ef888","group":"e215a6ff.af52c8","name":"Log","order":1,"width":30,"height":11,"columns":[{"field":"time","title":"Time","width":"10%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"priority","title":"Priority","width":"6%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"code","title":"Code","width":"5%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"message","title":"Message","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":570,"y":1240,"wires":[]},{"id":"de3101bb.82e3b","type":"change","z":"88dd7657.7ef888","name":"Log","rules":[{"t":"set","p":"payload","pt":"msg","to":"[log]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":1240,"wires":[["3e53c6e5.c9081a"]]},{"id":"2be76a2b.9df83e","type":"link in","z":"88dd7657.7ef888","name":"","links":["bc6a44ef.920178"],"x":35,"y":1240,"wires":[["3a427ce7.219734"]]},{"id":"e0d9071b.8bcd7","type":"ui_group","z":"","name":"Status","tab":"c953c76a.bd4468","order":1,"disp":true,"width":8,"collapse":true},{"id":"e304839f.d7b0f","type":"ui_group","z":"","name":"Signal","tab":"c953c76a.bd4468","order":3,"disp":true,"width":24,"collapse":true},{"id":"ee56c5cc.35c9e","type":"ui_group","z":"","name":"Addresses","tab":"c953c76a.bd4468","order":4,"disp":true,"width":8,"collapse":true},{"id":"8aceaaa1.29876","type":"ui_group","z":"","name":"Configuration","tab":"c953c76a.bd4468","order":2,"disp":true,"width":10,"collapse":true},{"id":"b92090f0.78b378","type":"ui_group","z":"","name":"Device","tab":"c953c76a.bd4468","order":5,"disp":true,"width":8,"collapse":true},{"id":"e215a6ff.af52c8","type":"ui_group","z":"","name":"Log","tab":"c953c76a.bd4468","order":6,"disp":true,"width":30,"collapse":true},{"id":"c953c76a.bd4468","type":"ui_tab","z":"","name":"Cable Modem","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

[dceejay]

you don't show how they are misaligned - looks okay to me (not knowing what it should look like)... layout looks same on Mac - FF 80.0.1 - Chrome 86.0.4240.22

But no - nowhere near top of stack. It's such a fundamental task to strip out the layout engine and look to replace with something more modern, that we may as well consider it alongside dropping Angular 1 - etc - aka moving to a completely new dashboard.

[Nodi-Rubrum]

I will add screen print when I can, but it is very similar to the example above, if I maximize the browser window, it is misaligned every time. If keep the window smaller than maximum, it sometimes is misaligned. Button draw on top over or out of position in reference to the parent owning tab, just like the example at the top of this issue.

So maybe when NR 2.0 or such is release type of thing? Then something might address this? If I understand the qualification you provided.

[dceejay]

releases of Dashboard and Node-RED are not tied. Dashboard is a set of nodes that works with Node-RED and is a separate project (that also happens to be under the node-red org within OpenJS).

[Nodi-Rubrum]

Fine, even though I am sure many don't parse that fact, the question still is applicable in context of our discussion, are we talking about a long time before any such design change for dashboard? Do you think we are talking months or even years?

[dceejay]

OK - to be 100% clear... I am not intending to look at this issue in the near to medium term - so probably years rather than months, maybe never. But as an open source project we are more than happy for others to help dig in and fix it with a pull request. The file that probably needs fixing is src/components/ui-card-panel/ui-masonry.js.

[knolleary]

@Nodi-Rubrum as your flow includes an HTTP Request node that doesn't resolve (is it intended to be run on your local network?), it is impossible to know what you expect the page to look like and what it does look like when it goes wrong. The symptom may be similar to the image at the top of the issue, but without a specific example of a flow that recreates the issue, along with images so we know what the expected result is and what the issue looks like when it goes wrong, it's going to be very hard for anyone to make progress on this. If you are able to replace the HTTP Request node with some hardcoded example data so it is entirely self-contained, and also add the images showing the expected/wrong views, that would certainly help whoever picks this issue up.

[Nodi-Rubrum]

Yup, it is a local page only. I will try to create an example that is transportable. But really my example is just that another example of what exactly this issue qualifies. My example is a bit more extreme if you will, since I have 3 tabs that are overlapping and the buttons draw above the hidden overlaps.