Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#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)

django-admin-plus-sign-chopped.png​ (29.5 KB ) - added by Natalia Bidart 2 years ago.
Example of issue in Django 5.0
django-admin-plus-sign-chopped-4.2.png​ (29.2 KB ) - added by Natalia Bidart 2 years ago.
Example of issue in 4.2
django-admin-selector-overflow.png​ (133.4 KB ) - added by Natalia Bidart 2 years ago.
Example of how the selector overflows the overall form row margin (RTL is irrelevant in this case I think)
before_34995.png​ (20.2 KB ) - added by Mariusz Felisiak 2 years ago.
after_34995.png​ (21.1 KB ) - added by Mariusz Felisiak 2 years ago.

Download all attachments as: .zip

Change History (15)

by Natalia Bidart, 2 years ago

Attachment: django-admin-plus-sign-chopped.png​ added

Example of issue in Django 5.0

by Natalia Bidart, 2 years ago

Attachment: django-admin-plus-sign-chopped-4.2.png​ added

Example of issue in 4.2

comment:1 by Natalia Bidart, 2 years ago

Cc: Tom Carrick added

Regression in d687febce5868545f99974d2499a91f81a32fef5

by Natalia Bidart, 2 years 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 Tom Carrick, 2 years ago

Owner: changed from nobody to Tom Carrick
Status: new → assigned

comment:3 by Natalia Bidart, 2 years 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 Natalia Bidart, 2 years ago

Triage Stage: Accepted → Unreviewed

Sorry I shouldn't have accepted my own ticket :-)

in reply to:  1 comment:5 by Mariusz Felisiak, 2 years 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

Last edited 2 years ago by Mariusz Felisiak (previous) (diff)

by Mariusz Felisiak, 2 years ago

Attachment: before_34995.png​ added

by Mariusz Felisiak, 2 years ago

Attachment: after_34995.png​ added

comment:6 by Mariusz Felisiak, 2 years ago

Version: dev → 5.0

comment:7 by Mariusz Felisiak, 2 years 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 {  
    582582    display: flex;
    583583    gap: 10px;
    584584    flex-grow: 1;
     585    flex-wrap: wrap-reverse;
    585586}
    586587
    587588.related-widget-wrapper-link {

comment:8 by Tom Carrick, 2 years ago

Has patch: set

​PR

comment:9 by GitHub <noreply@…>, 2 years ago

Resolution: → fixed
Status: assigned → closed

In dec8aa6:

Fixed #35001 -- Fixed position of related widget action icons in admin for some screen sizes.

comment:10 by Natalia <124304+nessita@…>, 2 years ago

In 6c502734:

[5.0.x] Fixed #35001 -- Fixed position of related widget action icons in admin for some screen sizes.

Backport of dec8aa68f6a2729e57a58c36a21d36daa9a99fed from main

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