[Django] #36556: When a TabularInline model has multiple fields, the page overflows.

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
--------------------------+-----------------------------------------
Reporter: Antoliny | Type: Bug
Status: new | Component: contrib.admin
Version: 5.2 | Severity: Normal
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------+-----------------------------------------
Even when a TabularInline model has just three or more fields, the page
overflows due to the width.

[[Image(Screenshot 2025-08-15 at 7.26.13 PM.png)]]

To prevent the page from overflowing, `overflow` CSS is needed. If we add
`overflow`, it should be applied to the table so that when there are
multiple fields, we can navigate through the elements inside the table via
scrolling.

It seems this was likely
[https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/forms.css#L416
considered during the design], but due to the nature of tables,
`overflow-x` does not apply. To fix this issue, the display should be
changed to `block`.
--
Ticket URL: <https://code.djangoproject.com/ticket/36556>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.

-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 5.2

Severity: Normal | Resolution:

Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------+--------------------------------------
Changes (by Antoliny):

* Attachment "Screenshot 2025-08-15 at 7.26.13 PM.png" added.

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------
Changes (by Antoliny):

* owner: (none) => Antoliny
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:1>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Description changed by Antoliny:

Old description:

> Even when a TabularInline model has just three or more fields, the page
> overflows due to the width.
>
> [[Image(Screenshot 2025-08-15 at 7.26.13 PM.png)]]
>
> To prevent the page from overflowing, `overflow` CSS is needed. If we add
> `overflow`, it should be applied to the table so that when there are
> multiple fields, we can navigate through the elements inside the table
> via scrolling.
>
> It seems this was likely
> [https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/forms.css#L416
> considered during the design], but due to the nature of tables,
> `overflow-x` does not apply. To fix this issue, the display should be
> changed to `block`.

New description:

Even when a TabularInline model has just three or more fields, the page
overflows due to the width.

[[Image(tabular_inline_overflow.png)]]

To prevent the page from overflowing, `overflow` CSS is needed. If we add
`overflow`, it should be applied to the table so that when there are
multiple fields, we can navigate through the elements inside the table via
scrolling.

It seems this was likely
[https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/forms.css#L416
considered during the design], but due to the nature of tables,
`overflow-x` does not apply. To fix this issue, the display should be
changed to `block`.

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:2>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Changes (by Antoliny):

* Attachment "Screenshot 2025-08-15 at 7.26.13 PM.png" removed.

--
Ticket URL: <https://code.djangoproject.com/ticket/36556>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------
Changes (by Antoliny):

* Attachment "tabular_inline_overflow.png" added.

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Description changed by Antoliny:

Old description:

> Even when a TabularInline model has just three or more fields, the page
> overflows due to the width.
>

> [[Image(tabular_inline_overflow.png)]]
>
> To prevent the page from overflowing, `overflow` CSS is needed. If we add
> `overflow`, it should be applied to the table so that when there are
> multiple fields, we can navigate through the elements inside the table
> via scrolling.
>
> It seems this was likely
> [https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/forms.css#L416
> considered during the design], but due to the nature of tables,
> `overflow-x` does not apply. To fix this issue, the display should be
> changed to `block`.

New description:

Even when a TabularInline model has just three or more fields, the page
overflows due to the width.

[[Image(admin_tabular_inline_overflow.png)]]

To prevent the page from overflowing, `overflow` CSS is needed. If we add
`overflow`, it should be applied to the table so that when there are
multiple fields, we can navigate through the elements inside the table via
scrolling.

It seems this was likely
[https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/forms.css#L416
considered during the design], but due to the nature of tables,
`overflow-x` does not apply. To fix this issue, the display should be
changed to `block`.

--
--

Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:3>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------

Changes (by Antoliny):

* Attachment "tabular_inline_overflow.png" removed.

--
Ticket URL: <https://code.djangoproject.com/ticket/36556>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+--------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+--------------------------------------
Changes (by Antoliny):

* Attachment "admin_tabular_inline_overflow.png" added.

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:

Keywords: inline | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+------------------------------------

Changes (by Sarah Boyce):

* stage: Unreviewed => Accepted

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:4>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+------------------------------------

Changes (by Antoliny):

* has_patch: 0 => 1

Comment:

[https://github.com/django/django/pull/19733 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:5>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------+------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:6>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------+------------------------------------
Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: inline | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 1
-------------------------------+------------------------------------

Changes (by Antoliny):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:7>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.

-------------------------------------+-------------------------------------

Reporter: Antoliny | Owner: Antoliny
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:

Keywords: inline | Triage Stage: Ready for
| checkin

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:8>

[Django]

#36556: When a TabularInline model has multiple fields, the page overflows.
-------------------------------------+-------------------------------------
Reporter: Antoliny | Owner: Antoliny

Type: Bug | Status: closed
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution: fixed

Keywords: inline | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce <42296566+sarahboyce@…>):

* resolution: => fixed
* status: assigned => closed

Comment:

In [changeset:"3e7aedfb2eb37d0c83ce3ce936f1b89eb5451dfa" 3e7aedfb]:
{{{#!CommitTicketReference repository=""
revision="3e7aedfb2eb37d0c83ce3ce936f1b89eb5451dfa"
Fixed #36556 -- Fixed TabularInline width overflowing the page.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/36556#comment:9>