#35001 closed Bug (fixed)
Add related object icon (green plus sign) is not fully visible in some screens
Reported by: | Natalia Bidart | Owned by: | Tom Carrick |
---|---|---|---|
Component: | contrib.admin | Version: | 5.0 |
Severity: | Release blocker | Keywords: | |
Cc: | Tom Carrick | Triage Stage: | Accepted |
Has patch: | yes | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | no |
Easy pickings: | no | UI/UX: | yes |
Description
While reviewing and debugging ticket #34995, I've noticed that the "green plus sign" used to add related objects is not fully visible in some screens (see attached). As far as I've investigated, this may be caused by having the following in responsive.css
for @media (max-width: 767px)
:
.aligned .form-row, .aligned .form-row > div { max-width: 100vw; }
I'm unclear if this is a release blocker though.
Attachments (5)
Change History (15)
by , 9 months ago
Attachment: | django-admin-plus-sign-chopped.png added |
---|
follow-up: 5 comment:1 by , 9 months ago
Cc: | added |
---|
Regression in d687febce5868545f99974d2499a91f81a32fef5
by , 9 months ago
Attachment: | django-admin-selector-overflow.png added |
---|
Example of how the selector overflows the overall form row margin (RTL is irrelevant in this case I think)
comment:2 by , 9 months ago
Owner: | changed from | to
---|---|
Status: | new → assigned |
comment:3 by , 9 months ago
Summary: | Admin: Add related object icon (green plus sign) is not fully visible in some screens → Add related object icon (green plus sign) is not fully visible in some screens |
---|---|
Triage Stage: | Unreviewed → Accepted |
Version: | 4.2 → dev |
comment:4 by , 9 months ago
Triage Stage: | Accepted → Unreviewed |
---|
Sorry I shouldn't have accepted my own ticket :-)
comment:5 by , 9 months ago
Severity: | Normal → Release blocker |
---|---|
Triage Stage: | Unreviewed → Accepted |
Replying to Natalia Bidart:
Regression in d687febce5868545f99974d2499a91f81a32fef5
I don't think it's a proper commit. I can see "+" before and after this commit, it may be in different places but it's still visible. However 999ba9db6d6331eaa58af77debba42754bcc1a8e made it not visible in some screens when sidebar is open, so we need to treat this as a regression.
Before 999ba9db6d6331eaa58af77debba42754bcc1a8e
After 999ba9db6d6331eaa58af77debba42754bcc1a8e
by , 9 months ago
Attachment: | before_34995.png added |
---|
by , 9 months ago
Attachment: | after_34995.png added |
---|
comment:6 by , 9 months ago
Version: | dev → 5.0 |
---|
comment:7 by , 9 months ago
Maybe we could add flex-wrap: wrap-reverse
to make it always visible, it's not perfect, but ...
-
django/contrib/admin/static/admin/css/widgets.css
diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index f5b769333b..64628652ec 100644
a b ul.timelist, .timelist li { 582 582 display: flex; 583 583 gap: 10px; 584 584 flex-grow: 1; 585 flex-wrap: wrap-reverse; 585 586 } 586 587 587 588 .related-widget-wrapper-link {
Example of issue in Django 5.0