Repeater depth option causes outline issue in AdminThemeUikit

[Toutouwai]

Short description of the issue

When the depth option is enabled on a repeater field, the bottom outline of the field does not show in AdminThemeUikit. Seems to be related to the position: relative that is added when the depth option is enabled.

With depth option:

Without depth option:

Setup/Environment

• ProcessWire version: 3.0.103

[ryancramerdesign]

I have to admit, I don't think I would have ever noticed that, but I can see observe it in testing here too. I'm not too concerned about it in Webkit since it's so difficult to notice, but in Firefox it's a different matter... it stands out quite a bit more—the left outline is missing, and the top/bottom outlines extend to the left edge of the screen. I've tried to figure out why using the browser inspector, etc., but can't find a particular reason for it, seems like maybe a browser oddity. While we need the position:relative, removing it doesn't change anything in Firefox either.

[Toutouwai]

I think we're going to run into several more of these outline issues in AdminThemeUikit.

From what I can tell the issue stems from Uikit's use of outline, which exists outside of an elements' box model. So every outlined element projects beyond its box, and therefore the outline's visibility on the page is affected by the stacking order of neighbouring elements (and elements within those elements), as well as the CSS overflow property.

When an element has position: relative it establishes a new stacking context and that is going to mess up the normal visibility of the borders in the grid layout.

But this comment in the article linked to above gave me an idea:

Element that is a child of a flex (flexbox) container, with z-index value other than "auto".

So if we give the outlined elements (which are children of a flex container) an explicit z-index of 1...

.Inputfield { z-index:1; } 

...it seems to fix the issue. The same would need to be done to for outlined grid elements that are not inputfields (if there are any). Will need some more testing too.

[Toutouwai]

I see what you mean about the Firefox issue. It does seem to be related to position: relative for me though - when that is disabled for .InputfieldContent the issue resolves.

Could the position: relative be applied to the ul.Inputfields inside .InputfieldContent instead? If that will still allow the depth option to work it avoids the outline problem in Firefox.

[Toutouwai]

I found the source of the Firefox issue. Firefox will draw the outline to include any absolutely positioned children (discussed here).

So this rule is the culprit:

.InputfieldRepeater .InputfieldRepeaterAddItem input {
    position: absolute;
    left: -9999px;
    top: 0;
}

Looks like the intention is to hide this element by placing it off screen. Could this be done some other way? E.g.

.InputfieldRepeater .InputfieldRepeaterAddItem input {
    display: none !important;
}

[ryancramerdesign]

That is some amazing detective work, thanks! You are a master at this. I have added your suggestion for the Firefox fix, as well as your suggestion for the outline fix (z-index=1 for .InputfieldRepeater). Seems to resolve it all in testing here. Thanks.

[Toutouwai]

Thanks.

[Toutouwai]

@ryancramerdesign, I see you have applied the z-index: 1 only to repeater inputfields. That won't be a solution because it places only repeater inputfields in their own stacking context when what we need is for all inputfields to be in the same stacking context.

With the change you made repeater inputfields go to the top, which affects the expected stacking where subsequent inputfields should be on top of previous inputfields in order for the outline to look right.

The z-index: 1 needs to be applied to .Inputfield:

.Inputfield { z-index: 1; }