search

node-red / node-red-ui-nodes

Additional nodes for Node-RED Dashboard
Apache License 2.0
122 stars 83 forks source link

node-red-node-ui-table column width incorrect at random #81

Open Michael-Hennemann opened 2 years ago

Michael-Hennemann commented 2 years ago

Which node are you reporting an issue on?

table node from node-red-node-ui-table

What are the steps to reproduce?

Not sure how exactly to reproduce. I am using several simple tables with 2 columns. First Align left, 75%, second align right 25% All are configured with the same settings

What happens?

The column width is displayed incorrectly at random. I have seen this with two separate NR instances, in Firefox, MS Edge and on iPhone and Android (Firefox). Sometimes they are displayed correctly, most of the time at least one or two are displayed incorrectly

grafik

What do you expect to happen?

Tables should have the size configured in node config

Please tell us about your environment:

Steve-Mcl commented 2 years ago

Hi.

Can you please share a minimal flow (use with nodes for data) that demonstrates this problem.

Thanks

Michael-Hennemann commented 2 years ago

Sure :) I hope this is what you have in mind, otherwise please tell me what else I can provide :)

[{"id":"c8fc394c.28e928","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"HmIP-RF","channel":"000C98A991E00A:1 Wohnzimmer Fußbodenheizung:1","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":240,"y":880,"wires":[["f0914a68.863de8"]]},{"id":"7336d124.6bd938","type":"function","z":"8ec70f6f.4a3ab8","name":"TempIst_Sammler","func":"// HEIZUNG\n\nvar inputdevice = {};\ninputdevice.name = msg.DeviceName\ninputdevice.state = msg.DeviceState\n\n\nvar workarray = global.get('tempist');\n\n\nif(workarray.find(e => (e.name === (inputdevice.name))))\n\n{\n\n for (var i=0; i < workarray.length; i++) \n\n {\n \n if (workarray[i].name === inputdevice.name) \n \n {\n workarray[i].state = inputdevice.state;\n \n } \n \n }\n\n}else{\n\n\n workarray.push({name:inputdevice.name,state:inputdevice.state})\n \n}\n\nglobal.set('tempist', workarray);\n\nmsg = {};\nmsg.payload = workarray\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":870,"y":640,"wires":[["f593bf66.26e4c"]]},{"id":"f593bf66.26e4c","type":"ui_table","z":"8ec70f6f.4a3ab8","group":"f5646a3.725ad18","name":"Temperatur Ist","order":0,"width":"7","height":"4","columns":[{"field":"name","title":"Raum","width":"75%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"state","title":"Ist","width":"25%","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":1160,"y":640,"wires":[]},{"id":"f0914a68.863de8","type":"function","z":"8ec70f6f.4a3ab8","name":"TempIst","func":"\nmsg.DeviceName = msg.room\nmsg.DeviceState = ((msg.payload) + \"°C\")\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":620,"y":640,"wires":[["7336d124.6bd938"]]},{"id":"5ec46647.2d0f1","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0236609:1 Büro Wandthermostat:1","datapoint":"TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":520,"wires":[["f0914a68.863de8"]]},{"id":"e623f805.f668d8","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"LEQ1461930:1 Küche Wandthermostat:1","datapoint":"TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":580,"wires":[["f0914a68.863de8"]]},{"id":"3976b195.52ca6e","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0253670:4 Schlafzimmer Thermostat 4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":220,"y":640,"wires":[["f0914a68.863de8"]]},{"id":"81a5e7c0.e33aa","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0249067:4 Badezimmer Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":220,"y":700,"wires":[["f0914a68.863de8"]]},{"id":"5f279070.ddd648","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0253750:4 WC Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":190,"y":760,"wires":[["f0914a68.863de8"]]},{"id":"796585e2.38f52c","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0249075:4 Dachboden Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":820,"wires":[["f0914a68.863de8"]]},{"id":"991834f3.5e2e","type":"time-inject","z":"8ec70f6f.4a3ab8","name":"Beim Start von NodeRed","nameInt":"¹true","positionConfig":"4811a5b.23b895c","props":[{"p":"","pt":"msgPayload","v":"true","vt":"bool","o":"","oT":"none","oM":"60000","f":0,"fS":0,"fT":"UNIX timestamp (ms)","fI":"0","next":true,"days":"","months":"","onlyOddDays":false,"onlyEvenDays":false}],"injectTypeSelect":"none","intervalCount":1,"intervalCountType":"num","intervalCountMultiplier":60000,"time":"","timeType":"entered","offset":0,"offsetType":"none","offsetMultiplier":60000,"timeEnd":"","timeEndType":"entered","timeEndOffset":0,"timeEndOffsetType":"none","timeEndOffsetMultiplier":60000,"timeDays":"*","timeOnlyOddDays":false,"timeOnlyEvenDays":false,"timeMonths":"*","timedatestart":"","timedateend":"","property":"","propertyType":"none","propertyCompare":"true","propertyThreshold":"","propertyThresholdType":"num","timeAlt":"","timeAltType":"entered","timeAltDays":"*","timeAltOnlyOddDays":false,"timeAltOnlyEvenDays":false,"timeAltMonths":"*","timeAltOffset":0,"timeAltOffsetType":"none","timeAltOffsetMultiplier":60000,"once":true,"onceDelay":"0","recalcTime":2,"x":650,"y":560,"wires":[["c90329eb.3cbd68"]]},{"id":"c90329eb.3cbd68","type":"function","z":"8ec70f6f.4a3ab8","name":"Globale Variablen deklarieren","func":"\n\nvar atuf = [];\nglobal.set('atuf',atuf)\n\n\nvar aroll = [];\nglobal.set('aroll',aroll)\n\nvar heizung = [];\nglobal.set('heizung',heizung)\n\nvar tempist = [];\nglobal.set('tempist',tempist)\n\nvar tempsoll = [];\nglobal.set('tempsoll',tempsoll)\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":940,"y":560,"wires":[[]]},{"id":"38263145.35ea0e","type":"ccu-connection","name":"localhost","host":"localhost","regaEnabled":true,"bcrfEnabled":true,"iprfEnabled":true,"virtEnabled":true,"bcwiEnabled":false,"cuxdEnabled":false,"regaPoll":true,"regaInterval":"30","rpcPingTimeout":"60","rpcInitAddress":"127.0.0.1","rpcServerHost":"127.0.0.1","rpcBinPort":"2047","rpcXmlPort":"2048"},{"id":"f5646a3.725ad18","type":"ui_group","name":"Temperatur Ist","tab":"94476cd1.94e7c","order":6,"disp":true,"width":"7","collapse":false},{"id":"4811a5b.23b895c","type":"position-config","name":"TimControlConfigNode_Koblenz","isValide":"true","longitude":"0","latitude":"0","angleType":"deg","timeZoneOffset":99,"timeZoneDST":0,"stateTimeFormat":"3","stateDateFormat":"12"},{"id":"94476cd1.94e7c","type":"ui_tab","name":"Zustände","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

Christian-Me commented 2 years ago

I experienced the same problem and went to absolute width (defined interactive, stored in content and replayed via msg.uicontrol)

You are not the only one: https://stackoverflow.com/questions/58533681/tabulator-table-columns-not-resizing-correctly

I believe the issue is related to the layout attribute which you can also change via msg.uicontrol.tabulator message

Michael-Hennemann commented 2 years ago

@Christian-Me : Thanks for the tip!

I changed it to fixed pixel values and now it seems to work. Was a bit tricky thou to find out the right values to fill the whole space and don't get any scroll bars.

Christian-Me commented 2 years ago

Sure it is more difficult than percent values and there are improvements around this issue in later versions of tabulator.

But until we manage to upgrade to 5.x I believe you have to work with pixel units.

If you are interested in the interactive way perhaps look at my ui table handler in the forum.