[Django] #32999: Admin Tabular Stacked Inline widget headings are not aligned headings
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Type: | Status: new
Uncategorized |
Component: | Version: 3.2
contrib.admin | Keywords: tabularinline css
Severity: Normal | style styling
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 0 |
-------------------------------------+-------------------------------------
With the following model:
```
class ApplicantAdmin(admin.TabularInline):
model = Application.applicant_set.through
@admin.register(Application)
class ApplicationAdmin(admin.ModelAdmin):
exclude = ('applicant_set', )
inlines = (ApplicantAdmin, )
```
The heading `Delete?` is on the left, however the delete button is on the
right, making it confusing for some people.
--
Ticket URL: <https://code.djangoproject.com/ticket/32999>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
* Attachment "notaligned.png" added.
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
Old description:
> With the following model:
> ```
> class ApplicantAdmin(admin.TabularInline):
> model = Application.applicant_set.through
>
> @admin.register(Application)
> class ApplicationAdmin(admin.ModelAdmin):
> exclude = ('applicant_set', )
> inlines = (ApplicantAdmin, )
> ```
> The heading `Delete?` is on the left, however the delete button is on the
> right, making it confusing for some people.
New description:
See the attached pic.
With the following model:
{{{
class ApplicantAdmin(admin.TabularInline):
model = Application.applicant_set.through
@admin.register(Application)
class ApplicationAdmin(admin.ModelAdmin):
exclude = ('applicant_set', )
inlines = (ApplicantAdmin, )
}}}
The heading `Delete?` is on the left, however the delete button is on the
right, making it confusing for some people.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32999#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
Old description:
> See the attached pic.
>
> With the following model:
>
> {{{
> class ApplicantAdmin(admin.TabularInline):
> model = Application.applicant_set.through
>
> @admin.register(Application)
> class ApplicationAdmin(admin.ModelAdmin):
> exclude = ('applicant_set', )
> inlines = (ApplicantAdmin, )
>
> }}}
>
> The heading `Delete?` is on the left, however the delete button is on the
> right, making it confusing for some people.
New description:
[[Image(https://code.djangoproject.com/attachment/ticket/32999/notaligned.png)]]
With the following model:
{{{
class ApplicantAdmin(admin.TabularInline):
model = Application.applicant_set.through
@admin.register(Application)
class ApplicationAdmin(admin.ModelAdmin):
exclude = ('applicant_set', )
inlines = (ApplicantAdmin, )
}}}
The heading `Delete?` is on the left, however the delete button is on the
right, making it confusing for some people.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32999#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
* Attachment "inline tabular.png" added.
If it is quite wide
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
Old description:
> [[Image(https://code.djangoproject.com/attachment/ticket/32999/notaligned.png)]]
>
> With the following model:
>
> {{{
> class ApplicantAdmin(admin.TabularInline):
> model = Application.applicant_set.through
>
> @admin.register(Application)
> class ApplicationAdmin(admin.ModelAdmin):
> exclude = ('applicant_set', )
> inlines = (ApplicantAdmin, )
>
> }}}
>
> The heading `Delete?` is on the left, however the delete button is on the
> right, making it confusing for some people.
New description:
[[https://code.djangoproject.com/attachment/ticket/32999/inline%20tabular.png]]
With the following model:
{{{
class ApplicantAdmin(admin.TabularInline):
model = Application.applicant_set.through
@admin.register(Application)
class ApplicationAdmin(admin.ModelAdmin):
exclude = ('applicant_set', )
inlines = (ApplicantAdmin, )
}}}
The heading `Delete?` is on the left, however the delete button is on the
right, making it confusing for some people.
Another issue is if the stacktabular has many fields:
Instead of the stacked tabular getting overflow x scroll, the whole page
does:
[[https://code.djangoproject.com/attachment/ticket/32999/notaligned.png]]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32999#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
* Attachment "Screenshot 2021-08-10 at 08.49.16.png" added.
Screenshot from admin showing Delete input and remove "extra" inline
controls.
Django
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution: needsinfo
Keywords: tabularinline css | Triage Stage:
style styling | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 0
-------------------------------------+-------------------------------------
* status: new => closed
* resolution: => needsinfo
Comment:
Hi Michael. Thanks for the report.
Just to clarify, there are **two** controls in play here:
[[Image(https://code.djangoproject.com/raw-
attachment/ticket/32999/Screenshot%202021-08-10%20at%2008.49.16.png)]]
The "Delete?" header corresponds to the checkbox input that controls
whether the existing inline instance should be deleted.
The "X" marks are JavaScript powered, and allow deleting the initially
empty "extra" inlines.
Those **shouldn't** line up.
In your "wider" example, they are being squashed together for lack of
space, but I wonder if/what we'd be able to do about that… 🤔
In your screenshots the checkboxes for delete are not showing — how
exactly is that coming up? Do you have `can_delete=False` set, or are
there restricted permissions in play? (etc)
It may be that we could optimise to not show the Delete? header at all in
this case.
Can I ask you to provide a fuller example (perhaps a sample project?)
recreating this?
Thanks again!
--
Ticket URL: <https://code.djangoproject.com/ticket/32999#comment:4>