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 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 2 months ago.
before_pagination.png (20.7 KB ) - added by Antoliny 2 months ago.

Download all attachments as: .zip

Change History (12)

by Antoliny, 2 months ago

Attachment: after_pagination.png added

by Antoliny, 2 months ago

Attachment: before_pagination.png added

comment:1 by Antoliny, 2 months ago

Description: modified (diff)

comment:2 by Antoliny, 2 months ago

Has patch: set
Needs tests: set

comment:3 by Antoliny, 2 months ago

Owner: set to Antoliny
Status: newassigned

comment:4 by Sarah Boyce, 2 months 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, 2 months 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 2 months ago by Antoliny (previous) (diff)

comment:6 by Sarah Boyce, 2 months ago

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

Replicated thank you

comment:7 by Antoliny, 2 months ago

Needs documentation: set
Needs tests: unset

comment:8 by Antoliny, 2 months ago

Needs documentation: unset

comment:9 by Sarah Boyce, 2 months ago

Triage Stage: AcceptedReady for checkin

comment:10 by Sarah Boyce <42296566+sarahboyce@…>, 2 months 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