Switcher

[brianteeman]

Steps to reproduce the issue

example page administrator/index.php?option=com_fields&view=field&layout=edit&context=com_users.user

Expected result

Actual result

Additional comments

This is caused by

The code can be found in administrator\templates\atum\scss\blocks\_edit.scss _edit.css

.layout-edit {
    .control-group {
        min-width: (100% / 3);
    }
    .control-label {
        float: none;
        width: 100%;
    }
    .controls {
        margin-left: 0;
    }
    .switcher__legend {
        margin-left: 0;
        float: none;
    }

I didn't fix this myself as I am unsure if you did this to address something specific and I just found an unintentional consequence or if its simply a bug

[bembelimen]

The whole switcher thing has a more "generic" problem. Joomla! gives all labels 220px margin-left. Therefore we have to set margin-left: -220px for the switcher, in some cases and 0 in some other cases (depending if label + field are in one line or not). So at the moment we have to visit every switcher and decide, what we have to set.

A better solution would be:

1. use the bootstrap 4 classes or (to be independent)
2. Handle all this margin stuff by using a "generic" class in the parent element like "form-horizontal" or "form-vertical".

Default should be vertical I guess.

[brianteeman]

1. yeah I know about the 220px - I wrote the code for the switcher :)
2. it was based on the form vertical and form horizontal iirc
3. When outputting the legend above the field we will also have to remove the legend width of 220px to avoid this

[bembelimen]

I think the solution is "easier" than expected.

We have to remove all this "customizing" from the template itself and let the switcher do its -220px magic. But if we want to remove it (= labels are over the input) we just have to set .form-no-margin to one of the parent elements.

[brianteeman]

I did say before that the switcher css should not be "customised" in the template :)

[ciar4n]

Before adding further to this CSS, it should be changed to flex. The current control-group CSS is very dated (IE10?). Flex resolves a lot of these issues out of the box.... its a perfect use case for flex... less CSS... not a hack (currently floating a label to remove from page flow and then adding a left margin to inline field... its weird).

[bembelimen]

I think, the switcher has a few issues especially regarding this .col-md-9 .switcher__legend, .col-md-12 .switcher__legend code. But I removed most of the CSS code from the template, regarding the switcher.

I agree with @ciar4n about becoming flex, but I think this should be done in the core repo, because it's much more than the edit screens.

[brianteeman]

Closed as resolved for now