#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 [email protected].
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.
