Opened 4 months ago
Closed 3 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 )
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 { 1119 1119 line-height: 22px; 1120 1120 margin: 0; 1121 1121 border-top: 1px solid var(--hairline-color); 1122 width: 100%;1123 1122 }
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)
Change History (16)
by , 4 months ago
Attachment: | image-20240620-132817.png added |
---|
by , 4 months ago
Attachment: | image-20240620-132917.png added |
---|
comment:1 by , 4 months ago
Description: | modified (diff) |
---|
comment:2 by , 4 months ago
Easy pickings: | set |
---|
comment:3 by , 4 months ago
Description: | modified (diff) |
---|
comment:4 by , 4 months ago
Triage Stage: | Unreviewed → Accepted |
---|
comment:5 by , 4 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 , 4 months ago
Owner: | changed from | to
---|---|
Status: | new → assigned |
comment:7 by , 4 months ago
Description: | modified (diff) |
---|
comment:8 by , 4 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
follow-up: 10 comment:9 by , 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
?
comment:10 by , 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 , 3 months ago
Here is the PR for required changes. https://github.com/django/django/pull/18352
comment:12 by , 3 months ago
Has patch: | set |
---|---|
Owner: | changed from | to
comment:13 by , 3 months ago
Triage Stage: | Accepted → Ready for checkin |
---|
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.