Opened 3 months ago

Closed 2 months ago

#35541 closed Bug (fixed)

Admin changelist total row css issue

Reported by: Sarah Boyce Owned by: arjun omray
Component: contrib.admin Version: 5.1
Severity: Normal Keywords:
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: no

Description (last modified by Sarah Boyce)

The border of the total row extends longer than the table


This would fix it for me (needs further testing)

  • django/contrib/admin/static/admin/css/base.css

    a b a.deletelink:focus, a.deletelink:hover {  
    11191119    line-height: 22px;
    11201120    margin: 0;
    11211121    border-top: 1px solid var(--hairline-color);
    1122     width: 100%;
    11231122}


I also believe the following related images should be updated with the lastest css:

  • docs/intro/_images/admin04t.png
  • docs/intro/_images/admin06t.png

Attachments (2)

image-20240620-132817.png​ (34.3 KB ) - added by Sarah Boyce 3 months ago.
image-20240620-132917.png​ (28.5 KB ) - added by Sarah Boyce 3 months ago.

Download all attachments as: .zip

Change History (16)

by Sarah Boyce, 3 months ago

Attachment: image-20240620-132817.png​ added

by Sarah Boyce, 3 months ago

Attachment: image-20240620-132917.png​ added

comment:1 by Sarah Boyce, 3 months ago

Description: modified (diff)

comment:2 by Sarah Boyce, 3 months ago

Easy pickings: set

comment:3 by Sarah Boyce, 3 months ago

Description: modified (diff)

comment:4 by Natalia Bidart, 3 months ago

Triage Stage: Unreviewed → Accepted

Great catch Sarah, thank you! As far as I can see this is an issue in 5.0 and 4.2 as well, so not a release blocker for 5.0.

comment:5 by tabiva, 3 months ago

Hi all, I would like to take on the bug and test the fix proposed by Sarah, I believe I can handle it!

comment:6 by tabiva, 3 months ago

Owner: changed from nobody to tabiva
Status: new → assigned

comment:7 by Sarah Boyce, 3 months ago

Description: modified (diff)

comment:8 by Sarah Boyce, 3 months ago

An alternative would be to add box-sizing: border-box; to .paginator
The combination of left and right padding applied from .module p and the width: 100%; from .paginator makes it "overflow"
To me, less css is better so would want some testing to confirm we can't just delete width: 100%;
Note that the top action row <div class="actions"> has the same issue on inspection

comment:9 by arjun omray, 3 months ago

While trying to work on this issue myself, I found that adding width: 100% on a.deletelink:focus, a.deletelink:hover would fix one of the lines but the bottom line would still be extended. This is not the case when using box-sizing: border-box on .paginator, both the lines are of proper width.

Also, I was unable to replicate the issue on <div class="actions">.

Should I make a PR with box-sizing: border-box on .paginator?

in reply to:  9 comment:10 by Sarah Boyce, 3 months ago

Replying to arjun omray:

Should I make a PR with box-sizing: border-box on .paginator?

Yes please, thank you

comment:11 by arjun omray, 3 months ago

Here is the PR for required changes. ​https://github.com/django/django/pull/18352

comment:12 by Sarah Boyce, 2 months ago

Has patch: set
Owner: changed from tabiva to arjun omray

comment:13 by Sarah Boyce, 2 months ago

Triage Stage: Accepted → Ready for checkin

comment:14 by Sarah Boyce <42296566+sarahboyce@…>, 2 months ago

Resolution: → fixed
Status: assigned → closed

In 5559011c:

Fixed #35541 -- Fixed paginator border in admin CSS.

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