Joomla-cms: [4.0] [backend-template] Input fields UX

[C-Lodder]

A well known UX killer is horizontal forms. Stacked is preferred as it makes scanning much easier

Take the screenshot below as an example. The larger you make your viewport, the harder it is to scan.

[brianteeman]

fully agree - I found it very confusing when navigating with the keyboard

[micker]

yes +1 => in media manager order and field placement aren't good

[micker]

@infograf768 i know you do some change ... some return ?

[micker]

i think this is better

maybe we can add css on slider selection to be more visible ?

[micker]

i can propose a pr and move order field in xml but not sure that can be a solution in responsive ... some way to link field ?

[C-Lodder]

I haven't looked at the markup or CSS properly, but assume it's all in some grid at the moment.
It should ideally be like it was before, everything stacked (with the exception of groups of fields, such as the global configuration settings) and a max-width set on the .form-control class.

For inputs that require a bigger width (article title and alias), simply use a custom class

[brianteeman]

If I understand the css (not always something I do) then this layout is created using css grid and it is not possible with css grid to flow vertically unless you know the exact number of rows which we don't.

The only solution (that I can see) is to switch from css grid to flex which will achieve what we want easily.

[ciar4n]

Flex is not really going to work here without changing the markup. column-count would be the best option.

[ciar4n]

Ignore my last comment. At first read, I thought this was related to field order (#27136).

[Quy]

Please test PR #27141

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/25891.}

[ciar4n]

Sorry @Quy you can re-open this. I mentioned the wrong issue in #27141

This is a separate issue.

[regularlabs]

Not replying here to join in to the discussion. But just to add my 2 cents and some info.

Today I tried to mock up a plugin in the latest nightly build. And playing around with the plugin edit form.
The whole column layout is bugging me a lot and also creates UX issues.

• There is no control over where it splits the fields to the next column.
  So fields that should stay together, might get split up.
• On pages with a lot of fields, you need to scrol down and up and down and up to follow the logical order of fields
• When fields show/hide using the showon thing, the columns get split differently, making fields jump from one to the next column. Major issue, as you have no idea what is going on. (Probably also the reason why the columns are not being used in the global configuration).
• Some field types - like subfields - need more horizontal space. The columns is killing the UX.

Some of the issues I ran into in the first 30 minutes of playing around.

As I said, this is not me trying to discuss these items, just handing over some info.

Also, I have already implemented some code in my first plugin conversion, so that it simply removes the "column-count-md-2 column-count-lg-3" class from the html output of the plugin edit form.
Meaning I don't really care what is done to solve the above mentioned issues. I'm gonna hack my way around issues anyway.

[brianteeman]

Thanks for the detailed feedback - full ack

[regularlabs]

Peter googles "full ack"

[regularlabs]

Before:

After:

😜

PS: Those nested grouping field sets (Scroll to Top, Slideshow) are not something Joomla provides as a standard option. That is done through my own custom form field elements.

[coolcat-creations]

Is it possible to add a class to the fieldset into the xml, and if not, how can something like this be done in Joomla?

[brianteeman]

Is it possible to add a class to the fieldset into the xml,

Currently only for a field

and if not, how can something like this be done in Joomla?

Should be a case of adding support in the custom element - joomla-tab

[Quy]

See https://github.com/joomla/joomla-cms/issues/27672 for discussion on one column.
See https://github.com/joomla/joomla-cms/pull/27613 to make one column.

[coolcat-creations]

I don't think that it should be generally 1,2 or 3 columns. It would be better to have a wrapping class in the fieldset or not? Just like Peter reported that he needs to have control when the column wraps...

[brianteeman]

Where it wraps is definitely an issue especially when you have one or more conditional (showon) fields

[Quy]

I see one column in Peter's screenshots just like in Global Configurations so I don't see where wrapping is required.

[coolcat-creations]

I see one column in Peter's screenshots just like in Global Configurations so I don't see where wrapping is required.

I meant the before screenshot with the 3 Columns :-)

[Quy]

Yes but he prefers the 2nd screenshot which is the same as in Global Configurations.

[coolcat-creations]

Yes but he prefers the 2nd screenshot which is the same as in Global Configurations.

Yes but @regularlabs also said that:

The whole column layout is bugging me a lot and also creates UX issues.

There is no control over where it splits the fields to the next column.
So fields that should stay together, might get split up.

I think we need a way to control the columns different than with just a class above it?

[regularlabs]

My advise would be:
Get rid of the column-count-md-2 column-count-lg-3 classes until you offer a way to control the splits in the columns.
A way that could be done is to have sub-field groups that would be wrapped in a div in which the elements stay together. Or something. Again, I don't really care too much. I'll implement my own work-arounds.

[brianteeman]

Personally I think the issue in this specific case is that we should not be using columns at all when the container is not 100% width

[Quy]

Please test PR #29706