Opened 2 years ago

Closed 2 years ago

#34095 closed Bug (fixed)

Form controls in admin should use heights in relative units

Reported by: Thibaud Colas Owned by: SwastikTripathi
Component: contrib.admin Version: 4.1
Severity: Normal Keywords: accessibility
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description (last modified by Thibaud Colas)

There are a lot of form controls in the admin that use hard-coded heights in pixels. This is problematic for users which change the font size, as the text then overflows / the UI looks broken.

Here are three in particular that fit neatly in a screenshot: https://code.djangoproject.com/raw-attachment/ticket/34095/Screenshot%202022-10-13%20at%2017.58.12.png

  • The search field’s input height
  • The actions’ select
  • The "Go" button

In all three cases, the fix is as simple as converting the height from pixels to rem (divide by 16).

Attachments (1)

Screenshot 2022-10-13 at 17.58.12.png (41.2 KB ) - added by Thibaud Colas 2 years ago.

Download all attachments as: .zip

Change History (12)

by Thibaud Colas, 2 years ago

comment:1 by Thibaud Colas, 2 years ago

Description: modified (diff)

comment:2 by jer, 2 years ago

Owner: changed from nobody to jer
Status: newassigned

comment:3 by Mariusz Felisiak, 2 years ago

Triage Stage: UnreviewedAccepted

comment:4 by Mariusz Felisiak, 2 years ago

Has patch: set

comment:5 by Mariusz Felisiak, 2 years ago

Patch needs improvement: set

comment:6 by GitHub <noreply@…>, 2 years ago

In 5a7f321:

Refs #34095 -- Changed height of form controls to use rem units in admin.

Co-authored-by: ja <ja@…>

comment:7 by Mariusz Felisiak, 2 years ago

Has patch: unset
Patch needs improvement: unset

There are still more cases to fix, see Thibaud's comment:

"Basically anything that contains text and has a height, max-height or line-height set in pixels is suspect."

"Here is a regex that identifies what to review: (max-height|height|line-height):.+px. Then for each of the definitions this identifies, we need to find the corresponding part of the UI, and check whether it makes sense for it to scale with the font size (if so – convert to `rem). Or whether it better stay at the fixed size."

comment:8 by SwastikTripathi, 2 years ago

Owner: changed from jer to SwastikTripathi

comment:9 by Mariusz Felisiak, 2 years ago

Has patch: set
Triage Stage: AcceptedReady for checkin

comment:10 by Mariusz Felisiak <felisiak.mariusz@…>, 2 years ago

In e20fd899:

Refs #34095 -- Changed more properties to use rem units in admin CSS.

comment:11 by Mariusz Felisiak, 2 years ago

Resolution: fixed
Status: assignedclosed

IMO we can consider this ticket as generally fixed. Small related cleanups are of course still welcome.

Note: See TracTickets for help on using tickets.
Back to Top