? ?
avatar C-Lodder
C-Lodder
16 Aug 2019

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.

Screenshot_2019-08-16 Modules Articles - Archived - J4 - Administration

avatar C-Lodder C-Lodder - open - 16 Aug 2019
avatar joomla-cms-bot joomla-cms-bot - change - 16 Aug 2019
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 16 Aug 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 16 Aug 2019
Labels Added: ?
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 16 Aug 2019
avatar brianteeman
brianteeman - comment - 16 Aug 2019

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

avatar franz-wohlkoenig franz-wohlkoenig - change - 16 Aug 2019
Status New Discussion
avatar micker
micker - comment - 20 Aug 2019

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

avatar micker
micker - comment - 21 Aug 2019

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

avatar micker
micker - comment - 21 Aug 2019

i think this is better
image
maybe we can add css on slider selection to be more visible ?

avatar micker
micker - comment - 27 Aug 2019

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 ?

avatar C-Lodder
C-Lodder - comment - 27 Aug 2019

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

avatar brianteeman
brianteeman - comment - 3 Sep 2019

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.

avatar ciar4n
ciar4n - comment - 24 Nov 2019

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

avatar ciar4n
ciar4n - comment - 24 Nov 2019

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

avatar Quy Quy - change - 24 Nov 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-11-24 19:00:48
Closed_By Quy
avatar Quy Quy - close - 24 Nov 2019
avatar Quy
Quy - comment - 24 Nov 2019

Please test PR #27141


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

avatar ciar4n
ciar4n - comment - 24 Nov 2019

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

This is a separate issue.

avatar Quy Quy - change - 24 Nov 2019
Status Closed Pending
Closed_Date 2019-11-24 19:00:48
Closed_By Quy
avatar Quy Quy - reopen - 24 Nov 2019
avatar regularlabs
regularlabs - comment - 5 May 2020

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.

avatar brianteeman
brianteeman - comment - 5 May 2020

Thanks for the detailed feedback - full ack

avatar regularlabs
regularlabs - comment - 5 May 2020

#Peter googles "full ack"

avatar regularlabs
regularlabs - comment - 6 May 2020

Before:
image
After:
image

?

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.

avatar coolcat-creations
coolcat-creations - comment - 6 May 2020

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?

avatar brianteeman
brianteeman - comment - 6 May 2020

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

avatar Quy
Quy - comment - 6 May 2020

See #27672 for discussion on one column.
See #27613 to make one column.

avatar coolcat-creations
coolcat-creations - comment - 6 May 2020

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

avatar brianteeman
brianteeman - comment - 6 May 2020

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

avatar Quy
Quy - comment - 6 May 2020

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

avatar coolcat-creations
coolcat-creations - comment - 6 May 2020

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 :-)

avatar Quy
Quy - comment - 6 May 2020

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

avatar coolcat-creations
coolcat-creations - comment - 10 May 2020

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?

avatar regularlabs
regularlabs - comment - 2 Jun 2020

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.

avatar brianteeman
brianteeman - comment - 2 Jun 2020

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

avatar Quy Quy - change - 19 Jun 2020
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2020-06-19 15:43:39
Closed_By Quy
avatar Quy Quy - close - 19 Jun 2020
avatar Quy
Quy - comment - 19 Jun 2020

Please test PR #29706

avatar wilsonge wilsonge - change - 18 Dec 2020
Status Closed New
Closed_Date 2020-06-19 15:43:39
Closed_By Quy
avatar wilsonge wilsonge - reopen - 18 Dec 2020
avatar wilsonge
wilsonge - comment - 18 Dec 2020

I'm re-opening this as a release blocker as the PR got closed

avatar wilsonge wilsonge - change - 18 Dec 2020
Labels Added: ?
avatar wilsonge wilsonge - labeled - 18 Dec 2020
avatar HLeithner HLeithner - close - 30 Dec 2020
avatar HLeithner
HLeithner - comment - 30 Dec 2020

I created a RFC PR #31810 any input is welcome. Closing this for the moment can be reopen if pr is not the solution.

avatar HLeithner HLeithner - change - 30 Dec 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-12-30 21:46:18
Closed_By HLeithner
avatar ciar4n
ciar4n - comment - 14 Feb 2021

Another possible solution... #32422

avatar wilsonge wilsonge - change - 20 Feb 2021
Labels Removed: ?
avatar wilsonge wilsonge - unlabeled - 20 Feb 2021

Add a Comment

Login with GitHub to post a comment