Open Toutouwai opened 6 years ago
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.
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.
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.
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;
}
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.
Thanks.
@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; }
@Toutouwai Hi Robin. Is this issue still active in the latest dev version? If not, can this issue be closed?
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