Opened 2 months ago
Closed 2 months ago
#36516 closed Cleanup/optimization (fixed)
Pagination and save button layout in the admin changelist footer has changed.
Reported by: | Antoliny | Owned by: | Antoliny |
---|---|---|---|
Component: | contrib.admin | Version: | dev |
Severity: | Release blocker | Keywords: | changelist, pagination, list_editable |
Cc: | Triage Stage: | Ready for checkin | |
Has patch: | yes | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | no |
Easy pickings: | no | UI/UX: | yes |
Description (last modified by )
The previous layout of the pagination and the changelist table save button was as follows.
However, the current layout has been changed as follows.
This change happened during the recent changelist pagination accessibility improvements3f59711, where the save button was separated from pagination.html, but justify-content: center
CSS was not added in the process.
Attachments (2)
Change History (12)
by , 2 months ago
Attachment: | after_pagination.png added |
---|
by , 2 months ago
Attachment: | before_pagination.png added |
---|
comment:1 by , 2 months ago
Description: | modified (diff) |
---|
comment:2 by , 2 months ago
Has patch: | set |
---|---|
Needs tests: | set |
comment:3 by , 2 months ago
Owner: | set to |
---|---|
Status: | new → assigned |
comment:4 by , 2 months ago
Resolution: | → worksforme |
---|---|
Status: | assigned → closed |
Tested against main on firefox with different window sizes with an admin with list_editable
set, I see no issues.
Can you share an admin to replicate this and any other details that might be relevant?
comment:5 by , 2 months ago
Resolution: | worksforme |
---|---|
Status: | closed → new |
I realize my explanation was a bit lacking.
This issue occurs on the changelist page when list_filter is applied.
When list_filter is active, the .filtered
class is added to the parent element, and this causes .paginator
to have width: auto
, which results in the problem.
changelist.css
.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull { width: auto; }
We can either remove .change-list .filtered .paginator
or add justify-content: center
,
but simply removing the existing .change-list .filtered .paginator
should be enough :)
Try testing with the PodcastAdmin!
class PodcastAdmin(admin.ModelAdmin): list_display = ("name", "release_date") list_editable = ("release_date",) date_hierarchy = "release_date" ++ list_filter = ("name", "release_date",) ordering = ("name",)
comment:6 by , 2 months ago
Severity: | Normal → Release blocker |
---|---|
Triage Stage: | Unreviewed → Accepted |
Version: | 5.2 → dev |
Replicated thank you
comment:7 by , 2 months ago
Needs documentation: | set |
---|---|
Needs tests: | unset |
comment:8 by , 2 months ago
Needs documentation: | unset |
---|
comment:9 by , 2 months ago
Triage Stage: | Accepted → Ready for checkin |
---|
PR