Opened 6 weeks ago

Closed 6 weeks 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 Antoliny)

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)

after_pagination.png (10.8 KB ) - added by Antoliny 6 weeks ago.
before_pagination.png (20.7 KB ) - added by Antoliny 6 weeks ago.

Download all attachments as: .zip

Change History (12)

by Antoliny, 6 weeks ago

Attachment: after_pagination.png added

by Antoliny, 6 weeks ago

Attachment: before_pagination.png added

comment:1 by Antoliny, 6 weeks ago

Description: modified (diff)

comment:2 by Antoliny, 6 weeks ago

Has patch: set
Needs tests: set

comment:3 by Antoliny, 6 weeks ago

Owner: set to Antoliny
Status: newassigned

comment:4 by Sarah Boyce, 6 weeks ago

Resolution: worksforme
Status: assignedclosed

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 Antoliny, 6 weeks ago

Resolution: worksforme
Status: closednew

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",)
Last edited 6 weeks ago by Antoliny (previous) (diff)

comment:6 by Sarah Boyce, 6 weeks ago

Severity: NormalRelease blocker
Triage Stage: UnreviewedAccepted
Version: 5.2dev

Replicated thank you

comment:7 by Antoliny, 6 weeks ago

Needs documentation: set
Needs tests: unset

comment:8 by Antoliny, 6 weeks ago

Needs documentation: unset

comment:9 by Sarah Boyce, 6 weeks ago

Triage Stage: AcceptedReady for checkin

comment:10 by Sarah Boyce <42296566+sarahboyce@…>, 6 weeks ago

Resolution: fixed
Status: newclosed

In d90bea1b:

Fixed #36516, Refs #36366 -- Fixed changelist footer layout with list_editable and list_filter.

Regression in 3f59711581bd22ebd0f13fb040b15b69c0eee21f.

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