Opened 7 months ago

Last modified 3 months ago

#35404 closed Bug

Admin fieldset multiple flexbox regressions — at Version 1

Reported by: minusf Owned by: nobody
Component: contrib.admin Version: 4.2
Severity: Normal Keywords: css admin fieldset accessibility
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 minusf)

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.


  1. 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:


  1. checkboxes are not aligned with their labels. I don't have a patch for this, only 2 screenshots:

with flexbox:


without flexbox:


Change History (7)

by minusf, 7 months ago

Attachment: flexbox-input.png added

by minusf, 7 months ago

Attachment: long-labels-with-patch.png added

by minusf, 7 months ago

Attachment: unaligned-checkbox.png added

by minusf, 7 months ago

Attachment: checkbox-wo-flexbox.png added

comment:1 by minusf, 7 months ago

Description: modified (diff)

by Sarah Boyce, 7 months ago

Attachment: image-20240425-090901.png added

by Sarah Boyce, 7 months ago

Attachment: image-20240425-092610.png added
Note: See TracTickets for help on using tickets.
Back to Top