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

[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.

[Basil Eric Rabi]

Screen shot

[Carlton Gibson]

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

[Tapasweni Pathak]

Hello folks: Can I take the ticket?

[Mariusz Felisiak]

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.

[Lionel Bersee]

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

[Mariusz Felisiak]

Lionel, feel-free, patch is welcome.

[Lionel Bersee]

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

[Utkarsh Rajwansh]

screen resolution for small device

[Utkarsh Rajwansh]

attempt to create the issue

[Utkarsh Rajwansh]

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
screenshot2.png

[Basil Eric Rabi]

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.

[Basil Eric Rabi]

More screentshot of the issue

[Basil Eric Rabi]

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.

[Utkarsh Rajwansh]

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

[Min ho Kim]

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.

[Basil Eric Rabi]

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.

[Min ho Kim]

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?

[Basil Eric Rabi]

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)

[Min ho Kim]

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

[Min ho Kim]

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

[Mariusz Felisiak <felisiak.mariusz@…>]

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.

[Mariusz Felisiak <felisiak.mariusz@…>]

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