Opened 7 days ago

Last modified 3 days ago

#35541 assigned Bug

Admin changelist total row css issue

Reported by: Sarah Boyce Owned by: tabiva
Component: contrib.admin Version: 5.1
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: no 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 7 days ago.
image-20240620-132917.png​ (28.5 KB ) - added by Sarah Boyce 7 days ago.

Download all attachments as: .zip

Change History (10)

by Sarah Boyce, 7 days ago

Attachment: image-20240620-132817.png​ added

by Sarah Boyce, 7 days ago

Attachment: image-20240620-132917.png​ added

comment:1 by Sarah Boyce, 7 days ago

Description: modified (diff)

comment:2 by Sarah Boyce, 7 days ago

Easy pickings: set

comment:3 by Sarah Boyce, 7 days ago

Description: modified (diff)

comment:4 by Natalia Bidart, 7 days 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, 6 days 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, 6 days ago

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

comment:7 by Sarah Boyce, 6 days ago

Description: modified (diff)

comment:8 by Sarah Boyce, 3 days 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

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