#35769: Multiline fields display wrong in tablet/phone sizes
--------------------------------+-----------------------------------------
Reporter: Richard Laager | Type: Bug
Status: new | Component: contrib.admin
Version: 4.2 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------+-----------------------------------------
This is another regression from commit
96a598356a9ea8c2c05b22cadc12e256a3b295fd:
https://github.com/django/django/commit/96a598356a9ea8c2c05b22cadc12e256a3b295fd
from PR 16161:
https://github.com/django/django/pull/16161
**Background:**
In that commit, the structure of the HTML changed.
If there are multiple fields in a row, it changed from:
{{{
<div class="form-row field-a field-b">
<div class="fieldBox field-a">
<label><!-- NOTE: Checkboxes have label and input reversed. -->
<input>
<div class="help">...</div>
</div>
<div class="fieldBox field-b">
<label>
<input>
<div class="help">...</div>
</div>
</div>
}}}
to:
{{{
<div class="form-row field-a field-b">
<div class="flex-container form-multiline">
<div>
<div class="flex-container fieldBox field-a"><!-- NOTE: Checkboxes
have a checkbox-row class. -->
<label><!-- NOTE: Checkboxes have label and input reversed. -->
<input>
</div>
<div class="help">...</div>
</div>
<div>
<div class="flex-container fieldBox field-b">
<label>
<input>
</div>
<div class="help">...</div>
</div>
</div>
</div>
}}}
If there is only one field in the row, it changed from:
{{{
<div class="form-row field-a field-b">
<div><!-- NOTE: Checkboxes have a checkbox-row class. -->
<label><!-- NOTE: Checkboxes have label and input reversed. -->
<input>
<div class="help">...</div>
</div>
</div>
}}}
to:
{{{
<div class="form-row field-a">
<div>
<div class="flex-container"><!-- NOTE: Checkboxes have a checkbox-row
class. -->
<label><!-- NOTE: Checkboxes have label and input reversed. -->
<input>
</div>
<div class="help">...</div>
</div>
</div>
}}}
There are several changes to the HTML structure relevant to this
discussion:
1. There is another level: `<div class="flex-container form-multiline">`
2. There is another level: `<div>`
3. The `<div class="help">` is no longer inside of the `<div
class="fieldBox field-X">`.
**The Bugs**
1. When there are multiple fields in a row, there are issues in both the
tablet and mobile screen sizes. First off, there are two instances of a
selector that's supposed to match, but doesn't because of the changed
structure. If we fix that to match the new structure, then that fixes the
phone size class. See phone-before1.png, phone-before2.png, phone-
after1.png, and phone-after2.png. The "1" images are manually
grabbed/cropped and show a single-line field above it, which is good for
comparing to the working single-line example. The "2" images are of that
particular DOM node via the Google Chrome Inspector's feature to
screenshot just a given node, so those are easier to directly compare.
2. With that first issue fixed, the tablet view still isn't correct. In
Django 3.2, moving to the tablet view forced one-field-per-line whether
that was necessary (width-wise) or not. If I take the same approach here,
by setting "width: 100%" on that `<div>`, then I get the same behavior and
it looks good. Compare tablet-mid2.png (which has the fixed selectors, but
no `width: 100%`) to tablet-after2.png (which has both).
**The Patch**
{{{
--- a/django/contrib/admin/static/admin/css/responsive.css
+++ b/django/contrib/admin/static/admin/css/responsive.css
@@ -199,7 +199,8 @@ input[type="submit"], button {
min-height: 0;
}
- fieldset .fieldBox + .fieldBox {
+ fieldset div:has(> .fieldBox) + div:has(> .fieldBox) {
+ width: 100%;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--hairline-color);
@@ -577,7 +578,7 @@ input[type="submit"], button {
width: auto;
}
- fieldset .fieldBox + .fieldBox {
+ fieldset div:has(> .fieldBox) + div:has(> .fieldBox) {
margin-top: 15px;
padding-top: 15p
}}}
**Other concerns:**
This doesn't affect Django itself, but affects third-party customizations
of the admin... It's a pain to select the div for a given field. (For one
example use case, we do this all over the place to set a width on the
first field in the row, such that the second fields in the row will line
up visually.) Previously, I could use `div.fieldBox.field-X` (for the
multiple-fields-per-line case). But since the help div is not inside that
div, but a peer to it, I need to get the parent div, but that has no
classes. To get a selector that matches it (but not its children), I end
up with this ugliness: `div.field-X > div > div:first-child`
I'm skeptical that even with all the fixes and everything I've
specifically discussed above that all the CSS has been updated properly.
For example, search the tree for the regex `\+ div.help`. There are things
like `form .aligned input + div.help` that would have matched before, but
don't match any more. I also suggest checking all the `.vCheckboxLabel`
selectors.
--
Ticket URL: <https://code.djangoproject.com/ticket/35769>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/01070191fe9490c3-e26203e0-93cd-447e-803a-987f422b4201-000000%40eu-central-1.amazonses.com.
