Opened 9 days ago
Last modified 5 days ago
#35404 new Bug
Admin fieldset multiple flexbox regressions
Reported by: | minusf | Owned by: | nobody |
---|---|---|---|
Component: | contrib.admin | Version: | 4.2 |
Severity: | Normal | Keywords: | css admin fieldset |
Cc: | minusf | Triage Stage: | Accepted |
Has patch: | no | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | no |
Easy pickings: | no | UI/UX: | yes |
Description (last modified by )
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.
- input type=text boxes on the right side grow in height if the label doesn't fit into 160px.
- long labels have uncovered another issue: incorrect line height and a forced height in general. After applying the following patch:
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:
- checkboxes are not aligned with their labels. I don't have a patch for this, only 2 screenshots:
with flexbox:
without flexbox:
Attachments (7)
Change History (11)
by , 9 days ago
Attachment: | flexbox-input.png added |
---|
by , 9 days ago
Attachment: | long-labels-with-patch.png added |
---|
by , 9 days ago
Attachment: | unaligned-checkbox.png added |
---|
by , 9 days ago
Attachment: | checkbox-wo-flexbox.png added |
---|
comment:1 by , 9 days ago
Description: | modified (diff) |
---|
by , 9 days ago
Attachment: | image-20240425-090901.png added |
---|
by , 9 days ago
Attachment: | image-20240425-092610.png added |
---|
comment:2 by , 9 days ago
Triage Stage: | Unreviewed → Accepted |
---|---|
Version: | 5.0 → 4.2 |
comment:3 by , 8 days ago
Thank your for looking into this. Interesting that for so long nobody reported this.
I am sorry but I think the help_text is not helping much, personally my eyes are still bleeding ;-)
If you are happy with the patch for the height issue (no 2.), I can start a pull request and work from there.
The first couple of "fixes" I tried were not effective and it seems like I have to dive into flex myself much deeper as my understanding of it is flawed.
by , 5 days ago
Attachment: | image-20240429-085114.png added |
---|
comment:4 by , 5 days ago
If you are happy with the patch for the height issue (no 2.), ...
I think you can also remove the line-height
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; } .aligned label:not(.vCheckboxLabel):after { content: ''; display: inline-block; vertical-align: middle; - height: 1.625rem; }
..., I can start a pull request and work from there.
Please do! I also think (2) should be a separate commit to (1) and (3) (maybe a commit message something like... Refs #35404 -- Fixed line height of admin fieldset labels.)
Thank you for the report and screenshots! Replicated 👍
For reference, this is how these examples looked on 4.1 (ignore the red dot)
1 and 3 are regressions from 96a598356a9ea8c2c05b22cadc12e256a3b295fd, 2 is a long standing issue.
Unsure what is the best option for 1, because the grow behaviour looks better when there is help text.
Happy to receive suggestions or to default to the previous behaviour.