[4.0] Field layout utility classes

[ciar4n]

Pull Request for Issue #25891 .

Summary of Changes

Adds some utility classes that can be applied using the parentclass attribute. These classes set width and layout of fields...

span-1 (16.6% width - single column)
span-2 (33.3% width - single column)
span-3 (50% width - single column)
span-4 (66.6% width - single column)
span-5 (83.3 width - single column)
span-6 (default - full width - single column)

For the option of displaying fields inline / in a row we have...

span-1-inline (16.6% width - inline)
span-2-inline (33.3% width - inline)
span-3-inline (50% width - inline)
span-4-inline (66.6% width - inline)
span-5-inline (83.3% width - inline)

Offset layout

offset-1 (16.6% offset)
offset-2 (33.3% offset)
offset-3 (50% offset)
offset-4 (66.6% offset)
offset-5 (83.3% offset)

Field orientation

stack (stack label on top of field)

See examples below....

Testing Instructions

Note: This can be partly tested via browser tools by adding the classes to the control-group div of a field. Otherwise simply edit xml using the class attribute..

<field
	name="article_layout"
	type="componentlayout"
	label="JFIELD_ALT_LAYOUT_LABEL"
	class="form-select"
	useglobal="true"
	extension="com_content"
	view="article"
        parentclass="span-4 stack"
/>

Documentation Changes Required

Yes

[regularlabs]

What is the reason for a new display attribute, when all it does is add it to the class?
Why not just use the ready-to-use class attribute?

So instead of this:

<field
	...
	class="form-select"
	display="span-4 stack"
/>

Simply do:

<field
	...
	class="form-select span-4 stack"
/>

[ciar4n]

None really.. I just replicated #31810. Happy to revert the extra attribute and just use the class attribute if considered the best approach here.

[brianteeman]

I guess it is more readable as display

[regularlabs]

I recommend you remove the display attribute. As it just complicates things. It is an anti-pattern.

In your example these would all do the same. I don't see how that makes things clearer or more readable:

class="form-select"
display="span-4 stack"

class="form-select span-4"
display="stack"

class="form-select stack"
display="span-4"

class="form-select span-4 stack"

display="form-select span-4 stack"

class="span-4 stack"
display="form-select"

class="stack"
display="form-select span-4"

class="span-4"
display="form-select stack"

[ciar4n]

A fair point. I have removed the display attribute in favour of applying these classes via the existing class atribute. Title and description have been updated.

[Quy]

Please add form-grid to Global Configuration to address issue #27672. Thanks.

[ciar4n]

Thx @Quy.. global config included with 06fddc9

[wilsonge]

I think this seems logical. Kinda prefer the grid layout to #31810 as well - seems more native/intuitive. I guess what's left is to work through core now and figure out where we do/don't want the column based layouts. Like I still think article options are better with the inline fields overall. Obviously plugins we don't want it etc.

[brianteeman]

Like I still think article options are better with the inline fields overall.

Might be better visually but they dont work as shown by multiple issues

[wilsonge]

Might be better visually but they dont work as shown by multiple issues

I mean it's unclear to me whether grid will have the same issues as we have in (showon i guess would have the same issues - but things like the calendar form field I'd hope wouldn't)

[wilsonge]

Anyhow thanks @ciar4n !

[ciar4n]

Thank you @wilsonge 👍

[richard67]

Saved me a lot of work for testing which I've scheduled for next weekend ;-)

[micker]

I will try to test if it solved issue when we use subform

[richard67]

Now someone has to do the work and add classes here and there to the fields so that the backend looks nice again. E.g. for Cassiopeia's template style options I'd think the "span-2-inline stack" should be fine.

[infograf768]

@ciar4n
Sorry I am totally lost. Take the menu module edit for example #31810 (comment)

My question is here #31810 (comment)
If I add the new classes to control-group, I can reduce the length of the input or select field, but not at all if I do for each field in the xml. Also these new classes don't seem to be useful to create multiple columns.

I guess I need examples that work.

[Magnytu2]

@wilsonge @brianteeman @ciar4n @richard67 Hello, you know I hope I appreciate you all. But now I do not agree with what you are doing. The backend of Joomla! 4 has now been in place for a few months. And I believe that it was finally accepted by the users.
You cannot leave the backend primarily displayed on a column. This makes using Joomla very painful. If google translate does its job well, I understand that you are going to put the display back to three columns. I sincerely hope so, with all my heart. You shouldn't make using Joomla even more difficult for new or small users. The media manager is already difficult to use beyond 12 images. Don't make the entire backend difficult to view on a computer screen. Thank you very much for your work.
Cyrille

[richard67]

I've already mentioned above that there is some work to do now: #32422 (comment)

[ciar4n]

This requires #32488

If merged I will create a PR with some examples.

[korenevskiy]

1. Using the display attribute is confusing, because after the display you want to write block. Yes, in general, and parentclass is also not clear about which parent we are talking about. I suggest using the controlclass attribute, we know that in the full sense of the control is just <div class= "control-group"/>
2. I suggest making the layout multi-column. But with the observance of several rules. the note field and the spacer field will be full-width.
   Controls located between the note and spacer fields, only between them will be distributed in 2-3 columns. This will allow you not to create a garbage can from the fields. And of course the ability to use the controlclass attribute.
   But having the ability to override the default classes and set your own width in the number of columns.
   .
   In any case, now in Joomla Nightly 1 column mode, by analogy J3, looks better. 1 column is clearer and the most important thing is available. I propose to center 1 column in the middle.

[micker]

@ciar4n thanks for this function i test it its great but seams doesn't works on fieldset
like
<fieldset name="block_config" label="MOD_DASHBOARD_BLOCK_CONFIG" description="MOD_DASHBOARD_BLOCK_CONFIG_DESC" parentclass="span-4 stack">
any idea ?

[ciar4n]

These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?

[micker]

Ok it Can be cool to use columns via fieldset more simple to use for basic ux
It Can be very simple 2 columns mode only

[korenevskiy]

These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?

@ciar4n As you can see, user @micker mixed up the parent for this attribute. Therefore, the field attribute should be more precise in the name, for example, ContainerClass, CaseClass, ControlClass.
Thank you for your work.