# UI-Form Landscape layout

**URL:** <https://discourse.nodered.org/t/ui-form-landscape-layout/40500>\
**Category:** Dashboard\
**Created:** [6 February 2021 16:13 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500 "2021-02-06T16:13:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [6 February 2021 16:13 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/1 "2021-02-06T16:13:52Z")

</div>

Hi,

Can you manipulate the UI-Form to be in landscape lay out? Or are you limited to portrait?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7461c4f5881bfffe87959a78cc19b47973db4095.png)

---

<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:** [6 February 2021 16:56 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/2 "2021-02-06T16:56:31Z")

</div>

Actually no.  
You can make 2 columns with slight override of dashboard CSS.  
If you don't know how to add CSS overrides, search here in forum with keywords "dashboard css"

But as the container size depends on card layout system and for that is told to take pre-calculated fixed size, there will be unused area at the bottom. Any attempt to override that will end with chaos.  
So - no win.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc3fde1609702fbc32725d881257bcf95b210b89.png)

```auto
.nr-dashboard-form form {
    padding: 0px 6px 0px 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.nr-dashboard-form form>div:not(:last-child) {
    display: flex;
    flex-direction: column;
    width:50%;
}
.nr-dashboard-form form>div:nth-last-child(1) {
     width:100%;
}

```

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [6 February 2021 20:27 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/3 "2021-02-06T20:27:32Z")

</div>

Hi,

So we are stuck with a void (Black Hole) at the bottom.

Thanks for your help, there is a lot of styling you can add

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

---

<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:** [6 February 2021 20:45 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/4 "2021-02-06T20:45:23Z")

</div>

> [@ScheepersJohan](#):
>
> there is a lot of styling you can add

oh yes, there is ... 🙂

The landscape layout seems to me quite of reasonable improvement for widget to think about...  
hmm...

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [6 February 2021 20:50 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/5 "2021-02-06T20:50:40Z")

</div>

> hmm...

What is the about 🙂 ?? Work to be done? 😉

---

<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:** [6 February 2021 20:57 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/6 "2021-02-06T20:57:31Z")

</div>

Well it takes some work for sure. And testing with quite of wide range of equipment ..  
But no I can't give any promises here..  
First it takes to get a resolution from the head of the dashboard department anyway 🙂@dceejay

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [6 February 2021 21:03 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/7 "2021-02-06T21:03:01Z")

</div>

Thanks for your assistance, Rome were not build in one day 🙂

Luckily this is for my view only, so it will work for me.

But we all appreciate all the improvements all the time, takes a lot of work and dedication.

---

<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:** [6 February 2021 21:49 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/8 "2021-02-06T21:49:32Z")

</div>

Happy to consider a PR for ui-form if anyone wants to provide one. How would the config options work? How would the user specify how items were distributed across the widget ? If split would all parts then to be that width or would some still want to be 100%. Etc. Some design thoughts up front would be useful.

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [6 February 2021 22:07 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/9 "2021-02-06T22:07:56Z")

</div>

In the line of the % of the row

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cdd2d78c8108a00c125da6996a642f4046c097fc.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd3617363527a5132da3f601fd70fa78e98ed472.png)

---

<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:** [7 February 2021 08:15 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/10 "2021-02-07T08:15:26Z")

</div>

Yeah, that may be most user friendly version. But introduces also quite of many edge cases.

Anyway, I prepared solution for 2 columns

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e0837439147bed482a0d4b2717c88051a6ebef3.png)

With most simple configuration options

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b32883c3494d1ffa048ad2fa7488339eb57daed3.png)

---

<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:** [7 February 2021 11:09 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/11 "2021-02-07T11:09:28Z")

</div>

Looks nice - though not sure I like the trailing entry being centred... I think left aligned would be cleaner.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6bc928a51d8611108f9c0cb78e356d404722039a.png)

---

<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:** [7 February 2021 11:12 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/12 "2021-02-07T11:12:09Z")

</div>

How small 1x1 unit size should I target the support? For sure it cant go down to 24px.  
(36px is easy, more down will be challenge)

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [7 February 2021 11:13 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/13 "2021-02-07T11:13:33Z")

</div>

If you distribute 2 columns on my screen you get approximately 89 characters per field.

With a bit of Googling it seems if you use a email address for a log in name max 320 characters, name 40 characters, surname 40 characters, street address 95 characters, town 35 characters, telephone numbers12 characters.

So my point of view is only for my current use case

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

---

<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:** [7 February 2021 11:37 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/14 "2021-02-07T11:37:34Z")

</div>

I think 1x1 is too small for any label - but I suppose you may just get the select box down arrow in.. I would say 2x1 minimum.

---

<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:** [7 February 2021 13:04 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/15 "2021-02-07T13:04:50Z")

</div>

No no, i meant if user configures dashboard 1x1 unit size, then what will be the minimum sizes to support with ui\_form. Due the browser native elements inside input containers it is not possible to support very small sizes. For myself I must draw the line somewhere to not go crazy. I think I can do safely 32x32 px minimum supported unit size. Will it be acceptable? (Smaller sizes will produce scrollbars obviously)

---

<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:** [7 February 2021 14:25 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/16 "2021-02-07T14:25:19Z")

</div>

Some changes ...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eba1e12990859a4e3a0df20b82a3abb74019d5c5.png)

---

<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:** [7 February 2021 15:05 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/17 "2021-02-07T15:05:01Z")

</div>

Ah right yes. I think others can get to about 28px. But yes that’s pretty good now

---

<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:** [7 February 2021 19:48 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/18 "2021-02-07T19:48:08Z")

</div>

Still too sloppy. I'm not happy at all. I worked out (I hope) correct sizing rules for layout and will take many steps back. As weekend is near to over, the development goes to slow progress mode. But at least I know now what to do...

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [13 February 2021 21:15 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/19 "2021-02-13T21:15:20Z")

</div>

Marvelous - see you have done the update, let me try it out.

---

<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:** [13 February 2021 21:40 UTC](https://discourse.nodered.org/t/ui-form-landscape-layout/40500/20 "2021-02-13T21:40:26Z")

</div>

Better wait for bugfix with next release... Building the Rome takes some plastering 😛 But it will be coming soon. (fixes already in master but not jet published)

[Next page](https://discourse.nodered.org/t/ui-form-landscape-layout/40500.md?page=2)