# Ui\_form shortens input fields when screen is less than 960px

**URL:** <https://discourse.nodered.org/t/ui-form-shortens-input-fields-when-screen-is-less-than-960px/10620>\
**Category:** Dashboard\
**Created:** [28 April 2019 18:25 UTC](https://discourse.nodered.org/t/ui-form-shortens-input-fields-when-screen-is-less-than-960px/10620 "2019-04-28T18:25:13Z")\
**Posts on this page:** 3\
**Page:** 1

<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 April 2019 18:25 UTC](https://discourse.nodered.org/t/ui-form-shortens-input-fields-when-screen-is-less-than-960px/10620/1 "2019-04-28T18:25:13Z")

</div>

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:

 ![46%20PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c496d8d62236f0078bebd3e47e3a835d3eca5736.png)  
but when the screen width is smaller it looks like this:  
 ![49%20PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9fcaa563eb24ef683ba57c5a2aa09683ba7888ee.png)

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

 ![10%20PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6277e98312d0f91ab9621ce1c297971d7f35ac16.png)

Here is the flow of this single ui\_form

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

```

---

<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 April 2019 12:06 UTC](https://discourse.nodered.org/t/ui-form-shortens-input-fields-when-screen-is-less-than-960px/10620/2 "2019-04-30T12:06:12Z")

</div>

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

---

<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 April 2019 12:43 UTC](https://discourse.nodered.org/t/ui-form-shortens-input-fields-when-screen-is-less-than-960px/10620/3 "2019-04-30T12:43:49Z")

</div>

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