Ui_form shortens input fields when screen is less than 960px

Node-RED version: v0.20.5
Node.js version: v10.15.3
Darwin 17.7.0 x64 LE
Dashboard version 2.14.0 started at /ui

While working on a project I noticed an issue with the fields in a ui_form. The tab and the ui_form both have a width of 12. With a wide screen they look like this:


but when the screen width is smaller it looks like this:

Doing some playing I discovered that the width's of the ui_form emements drop when the form breaks the 960px width.

Here is the flow of this single ui_form

[{"id":"bbffcbad.f19f98","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"fbbd4366.6e5728","type":"ui_form","z":"bbffcbad.f19f98","name":"Encoding form","label":"","group":"f1b60d42.40c3a8","order":1,"width":"12","height":"4","options":[{"label":"Offset","value":"offset","type":"number","required":true},{"label":"Message","value":"plaintext","type":"text","required":true}],"formValue":{"offset":"","plaintext":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":260,"y":60,"wires":[[]]},{"id":"efa962a4.28f17","type":"function","z":"bbffcbad.f19f98","name":"","func":"//var l = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\nvar l = 'az';\nvar i;\nfor (i=0;i<2;i++){\n   node.warn(\"letter[\"+l[i]+\"]=\"+l.charCodeAt(i)); \n}\n\nreturn msg;","outputs":1,"noerr":0,"x":250,"y":720,"wires":[["aae571f6.6f8d18"]]},{"id":"aae571f6.6f8d18","type":"debug","z":"bbffcbad.f19f98","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":430,"y":720,"wires":[]},{"id":"c819c0c9.480fd8","type":"inject","z":"bbffcbad.f19f98","name":"","topic":"","payload":"{\"offset\":1,\"plaintext\":\"this is a secret message\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":660,"wires":[["efa962a4.28f17"]]},{"id":"f1b60d42.40c3a8","type":"ui_group","z":"","name":"Tab 1","tab":"aefefd2a.9c6d68","order":1,"disp":false,"width":"12","collapse":false},{"id":"aefefd2a.9c6d68","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

@dceejay Is there a reason the ui-form, set to a width of 12, resized at 960px while none of the other ui nodes do?

Not that I am aware of. There is a setting of 960 that affects the sidenav bar - but nothing to do with ui_forms.
Easy enough to fix

1 Like