Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#30725 closed Bug (fixed)

Textbox size of a DateTimeField with local timezone in settings becomes too small in admin.TabularInline when browser windows is made smaller

Reported by: Basil Eric Rabi Owned by: Min ho Kim
Component: contrib.admin Version: dev
Severity: Normal Keywords:
Cc: Lionel Bersee, Utkarsh Rajwansh, Min ho Kim Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description (last modified by Basil Eric Rabi)

I have a model with a DateTimeField and used it in admin.TabularInline for the Django Admin using TIME_ZONE = 'Asia/Manila' in settings.py. When the browser window is wide enough there are no issues. But when the browser window is made smaller or when you use a phone to view the admin page, you can't see the text inside the text box for the date and time since the boxes become too small.

Attachments (4)

small.png (10.0 KB ) - added by Basil Eric Rabi 5 years ago.
Screen shot
screenshot1.png (34.4 KB ) - added by Utkarsh Rajwansh 5 years ago.
screen resolution for small device
screenshot2.png (26.2 KB ) - added by Utkarsh Rajwansh 5 years ago.
attempt to create the issue
firefox.png (75.2 KB ) - added by Basil Eric Rabi 5 years ago.
More screentshot of the issue

Download all attachments as: .zip

Change History (29)

by Basil Eric Rabi, 5 years ago

Attachment: small.png added

Screen shot

comment:1 by Carlton Gibson, 5 years ago

Easy pickings: set
Triage Stage: UnreviewedAccepted

OK, yes. Looks like a CSS adjustment (min-width?) is needed. Thanks for the report (and screenshot!)

comment:2 by Tapasweni Pathak, 5 years ago

Hello folks: Can I take the ticket?

comment:3 by Mariusz Felisiak, 5 years ago

Feel-free (I saw that you left the same question in few tickets) it's probably better to focus on 1-2 tickets and start to work on others when fix is ready.

comment:4 by Lionel Bersee, 5 years ago

I would like to pick up and work on this ticket, would this be okay? I am a first time contributor.

comment:5 by Lionel Bersee, 5 years ago

Cc: Lionel Bersee added

comment:6 by Mariusz Felisiak, 5 years ago

Lionel, feel-free, patch is welcome.

comment:7 by Lionel Bersee, 5 years ago

Owner: changed from nobody to Lionel Bersee
Status: newassigned

comment:8 by Lionel Bersee, 5 years ago

Owner: Lionel Bersee removed
Status: assignednew

Sorry I've become a little busy and might not have time to work on this, others are free to pick up.

comment:9 by Utkarsh Rajwansh, 5 years ago

Cc: Utkarsh Rajwansh added
Owner: set to Utkarsh Rajwansh
Status: newassigned

by Utkarsh Rajwansh, 5 years ago

Attachment: screenshot1.png added

screen resolution for small device

by Utkarsh Rajwansh, 5 years ago

Attachment: screenshot2.png added

attempt to create the issue

comment:10 by Utkarsh Rajwansh, 5 years ago

Resolution: needsinfo
Status: assignedclosed

Tried recreating the issue but didn't find any practical application or scenario where such a small screen resolution is needed as per my observation.So either there is not enough info to proceed on this bug or this bug is invalid.
Screenshots attached with screen resolution parameters.

screenshot1.png https://code.djangoproject.com/attachment/ticket/30725/screenshot1.png
screenshot2.png https://code.djangoproject.com/attachment/ticket/30725/screenshot2.png

comment:11 by Basil Eric Rabi, 5 years ago

Resolution: needsinfo
Status: closednew

You need to put the DateTimeField in the TabularInline along with other fields such as CharField and Text field. When there are a number of fields, the TabularInline becomes scrollable from left to right and the text box of the DateTimeField becomes very small.

by Basil Eric Rabi, 5 years ago

Attachment: firefox.png added

More screentshot of the issue

comment:12 by Basil Eric Rabi, 5 years ago

Attaching another screenshot (firefox.png) to further clarify the issue. As can be observed, the text box of the DateTimeField in the TabularInline is too small that the contents can't be read. This issue is only present in the TabularInline and not in the StackedInline so I believe this is a valid bug.

comment:13 by Utkarsh Rajwansh, 5 years ago

I guess , need more time to understand repo. By the time if anyone else has fix please go ahead.

comment:14 by Min ho Kim, 5 years ago

Hi Basil Eric Rabi,
I tried to reproduce the issue as well, but couldn't make it.

I made my admin look like your screenshot with DateTimeField in TabularInline along with CharField and TextField.
But none of the fields, including DateTimeField, shrunk at any screen size I can test.
It just becomes scrollable all the way through, and DateTimeField input box size changes very slightly as you resize the screen.

I tried Django version 2.2 and master.
Tried on current versions of Chrome and FireFox, checking different screen sizes for various devices, and tried on my mobile phone.

I think we need more information here.

comment:15 by Min ho Kim, 5 years ago

Cc: Min ho Kim added

comment:16 by Basil Eric Rabi, 5 years ago

Description: modified (diff)
Summary: Textbox size of a DateTimeField becomes too small in admin.TabularInline when browser windows is made smallerTextbox size of a DateTimeField with local timezone in settings becomes too small in admin.TabularInline when browser windows is made smaller

Hi Min ho Kim,

I'm sorry for the lacking information. I just tried to do a minimal reproducible example and found out what was missing was the TIME_ZONE = 'Asia/Manila' in settings.py. It seems the bug is not triggered if TIME_ZONE = 'UTC'. I updated the bug description.

comment:17 by Min ho Kim, 5 years ago

Hi Basil Eric Rabi,
I don't think it's related to the settings either, changing TIME_ZONE = 'Asia/Manila' doesn't do anything.
It looks like a CSS issue like Carlton said (not your CSS file).

django>contrib>admin>static>admin>css>widgets.css>
    min-width: 0;

What browser are you using? and what version is it?
If it's not the latest version, could you upgrade the browser and see if it still exist?

comment:18 by Basil Eric Rabi, 5 years ago

Hi Min ho Kim,

I meant that by changing the TIME_ZONE to your_browser's_local_timezone, the issue will be reproduced. For me, my time zone is Asia/Manila. If I put time zones other than my local time zone (which is Asia/Manila), the text box *does not* shrink when the browser window is resized smaller. This must be the case for you since most probably, your time zone is not Asia/Manila. I think you can reproduce the issue if you change the time zone to your local one.

This may be related to the absence of this message under the widget:
`
Note: You are n hours ahead/behind server time.
`
If this message is absent, then the text box will shrink if the browser window is resized.

These are the browsers I am presently testing:

  1. Firefox 69.0 (Fedora 30)
  2. Firefox 68.1 (Android O)
  3. Google Chrome 76.0.3809.132 (Fedora 30)

comment:19 by Min ho Kim, 5 years ago

Hi Basil Eric Rabi,
Yes! Changing TIME_ZONE does reproduce the issue!
In my case, "Australia/Sydney".

Version 0, edited 5 years ago by Min ho Kim (next)

comment:20 by Min ho Kim, 5 years ago

Version: 2.2master

comment:21 by Min ho Kim, 5 years ago

Has patch: set

comment:22 by Min ho Kim, 5 years ago

I guess , need more time to understand repo. By the time if anyone else has fix please go ahead.

Hi Utkarsh Rajwansh,
I submitted patch. Hope you don't mind.

https://github.com/django/django/pull/11766

Last edited 5 years ago by Min ho Kim (previous) (diff)

comment:23 by Mariusz Felisiak, 5 years ago

Owner: changed from Utkarsh Rajwansh to Min ho Kim
Status: newassigned
Triage Stage: AcceptedReady for checkin

comment:24 by Mariusz Felisiak <felisiak.mariusz@…>, 5 years ago

Resolution: fixed
Status: assignedclosed

In b1d6b35e:

Fixed #30725 -- Fixed width of DateTimeField inputs in admin tabular inline.

"width" of DateTimeField inputs in admin tabular inline wasn't set
correctly what caused displaying too small inputs with responsive CSS
when timezone warning wasn't present.

comment:25 by Mariusz Felisiak <felisiak.mariusz@…>, 5 years ago

In 6c761a2:

[3.0.x] Fixed #30725 -- Fixed width of DateTimeField inputs in admin tabular inline.

"width" of DateTimeField inputs in admin tabular inline wasn't set
correctly what caused displaying too small inputs with responsive CSS
when timezone warning wasn't present.
Backport of b1d6b35e146aea83b171c1b921178bbaae2795ed from master

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