UI-Form Landscape layout


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

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.

.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;
.nr-dashboard-form form>div:nth-last-child(1) {
1 Like


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

oh yes, there is ... :slight_smile:

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


What is the about :slight_smile: ?? Work to be done? :wink:

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 :slight_smile: @dceejay

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

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.

1 Like

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.

In the line of the % of the row



1 Like

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

Anyway, I prepared solution for 2 columns

With most simple configuration options

Looks nice - though not sure I like the trailing entry being centred... I think left aligned would be cleaner.

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)

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

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.

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)

Some changes ...

1 Like

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

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...


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

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