#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------
Description changed by minusf:
Old description:
> Hello. I have noticed a couple regressions in the admin fieldset css. I
> think they are all related to switching `<div class="form-row">` to
> flexbox.
>
> 1. input type=text boxes on the right side grow in height if the label
> doesn't fit into 160px.
>
> 2. long labels have uncovered another issue: incorrect line height and a
> forced height in general.
>
> 3. checkboxes are not aligned with their labels.
New description:
Hello. I have noticed a couple regressions in the admin fieldset css. I
think they are all related to switching `<div class="form-row">` to
flexbox.
1. input type=text boxes on the right side grow in height if the label
doesn't fit into 160px.
[[Image(flexbox-input.png)]]
2. long labels have uncovered another issue: incorrect line height and a
forced height in general. After applying the following patch:
{{{#!diff
M django/contrib/admin/static/admin/css/forms.css
@@ -84,14 +84,13 @@ form ul.inline li {
min-width: 160px;
width: 160px;
word-wrap: break-word;
- line-height: 1;
+ line-height: 1.5;
}
.aligned label:not(.vCheckboxLabel):after {
content: '';
display: inline-block;
vertical-align: middle;
- height: 1.625rem;
}
.aligned label + p, .aligned .checkbox-row + div.help, .aligned label +
div.readonly {
}}}
long labels looks more readable:
[[Image(long-labels-with-patch.png)]]
3. checkboxes are not aligned with their labels. I don't have a patch for
this, only 2 screenshots:
with flexbox:
[[Image(unaligned-checkbox.png)]]
without flexbox:
[[Image(checkbox-wo-flexbox.png)]]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:1>
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/0107018f12680cac-98b6f8a4-08c7-401f-ab4c-a08667a76925-000000%40eu-central-1.amazonses.com.
