id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
11195	add fieldname to admin changelist <td> tags -- eases CSS customization	Antti Kaihola	nobody	"=== The Itch ===

Currently it's fairly difficult to customize the layout of individual columns in the admin change list view. The `<td>` and `<th>` tags are created programmatically, not using templates, and the existing set of `id=` and `class=` attributes for cells and their contents don't help in writing simple CSS selectors.

=== A way to scratch ===

The attached patch adds a ""`fieldname_*`"" class name for each cell of the change list table. This enables simple CSS selectors to match columns by field name.

=== Use case ===

A simple example of what this makes possible: Suppose that in order to maximize the width of a text field we want to split a date field into two rows. The ""''Today | <calendar symbol>''"" part should be rendered below the date `TextInput`, not next to it to the right as usual.

A model:
{{{
class Poll(models.Model):
    title = models.CharField(max_length=100)
    question = models.CharField(max_length=200)
    pub_date = models.DateField('date published')
}}}

The admin definition makes our fields editable in the change list:
{{{
class PollAdmin(admin.ModelAdmin):
    list_display = 'title', 'question', 'pub_date',
    list_editable = 'question', 'pub_date',
}}}

An ""`admin/my_app/poll/change_list.html`"" template for injecting CSS into the change list:
{{{
{% extends ""admin/change_list.html"" %}
{% block extrastyle %}
  {{ block.super }}
  <link rel=""stylesheet"" type=""text/css"" href=""/css/poll_admin_changelist.css"" />
{% endblock extrastyle %}
}}}

Custom CSS rules in ""`MEDIA_ROOT/css/poll_admin_changelist.css`"":
{{{
#changelist td.fieldname_question input { width: 50em; }
#changelist td.fieldname_pub_date span { display: block; }
}}}

Without the presented patch this is impossible using only clean and simple CSS definitions since the ""`fieldname_question`"" and ""`fieldname_pub_date`"" classes are missing.

=== Cons ===

A drawback is that the size of the HTML source for a change list page grows by (19 + ''field name length'') bytes for every field, or (11 + ''field name length'') bytes for date/time fields.

=== Other ways to scratch this itch ===

For brevity, the class name could be formed from a short prefix and the field index (e.g. `""f1""`, `""f2""` etc., basically the column number). However, this would break the CSS every time the set of fields is changed.

Another possible approach would be to modify the `{% result_list %}` inclusion tag (or, more specifically, the `django.contrib.admin.templatetags.admin_list.items_for_result()` function) to render each cell using an overridable template.

Or, `{% result_list %}` could replace the ""`results`"" list of strings in its context with a list of dicts containing enough information about each field. Cells would be rendered in the ""`admin/change_list_results.html`"" template based on those dicts. Customizability would come with the expense of part of the complexity moving from the template tag to the template."	New feature	closed	contrib.admin	dev	Normal	fixed	css	chris@…	Accepted	1	1	0	0	0	1