# Resizing ui\_form in dashboard after 1x1 widget size change

**URL:** <https://discourse.nodered.org/t/resizing-ui-form-in-dashboard-after-1x1-widget-size-change/39852>\
**Category:** Dashboard\
**Created:** [27 January 2021 09:31 UTC](https://discourse.nodered.org/t/resizing-ui-form-in-dashboard-after-1x1-widget-size-change/39852 "2021-01-27T09:31:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JCLeuvennink](https://avatars.discourse-cdn.com/v4/letter/j/94ad74/32.png) [@JCLeuvennink](https://discourse.nodered.org/u/JCLeuvennink)\
**Post date:** [27 January 2021 09:31 UTC](https://discourse.nodered.org/t/resizing-ui-form-in-dashboard-after-1x1-widget-size-change/39852/1 "2021-01-27T09:31:23Z")

</div>

Good day

I am busy developing a node-red dashboard and I wanted to change the minimum 1x1 widget size for reasons I will not go into now. I changed the 1x1 widget size in the dashboard site settings from 48x48 px to 24x24 px as shown below:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67f88150038bc39a791191d596a0c56eb2c637a6.png)

Most of the dashboard elements worked fine with the new 1x1 widget size, but I am having problems with the ui\_form widget. the spacing between the elements within the form is smaller now which causes the text to overlap when you input values as seen below. the whole thing also gets put in a scroll pane. I tired to increase the size of the widget, but it does not allow me to change the height of the form widget, only the width can be changed.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/0171c9b4518eafc9db60ab074607f6433a1e4267.png)

I there any way to increase the spacing between the elements and increase the overall height so that is works with the smaller 1x1 widget size?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 January 2021 09:57 UTC](https://discourse.nodered.org/t/resizing-ui-form-in-dashboard-after-1x1-widget-size-change/39852/2 "2021-01-27T09:57:13Z")

</div>

24x24 is extreme. Very extreme. Most of the widgets don't support that small size.  
Yes, you can override the CSS of any element. That takes some knowledge of CSS overall and pretty clear understanding of dashboard structure. The `ui_form` is one of the trickiest elements to style.

So my first advise is to rethink about the unit size.

---

<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:** [26 February 2021 09:57 UTC](https://discourse.nodered.org/t/resizing-ui-form-in-dashboard-after-1x1-widget-size-change/39852/3 "2021-02-26T09:57:34Z")

</div>

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