add fieldname to admin changelist <td> tags -- eases CSS customization

[Antti Kaihola]

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.

[Antti Kaihola]

patch: initial implementation and tests

[Antti Kaihola]

Patch and tests updated for Django r15458 (between 1.3b1 and 1.3)

[Julien Phalip]

#14291 is a dupe.

[Antti Kaihola]

Replying to julien:

#14291 is a dupe.

vjimw seems to have a ​patch there as well. We should take a look at it and see if he has found a more elegant solution or thought of corner cases I might have missed.

[Ramiro Morales]

akaihola's patch updated to current trunk status. Changed CSS class name prefix to 'fldname-'

[Ramiro Morales]

Replying to akaihola:

vjimw seems to have a ​patch there as well. We should take a look at it and see if he has found a more elegant solution or thought of corner cases I might have missed.

vjimw's patch had no extra functionality compared to yours. Only difference is the class name

I've updated the patch with:

• Avoid touching the class of the select chebox cell, it is still 'action-checkbox' instead of being renamed to fieldname_action_checkbox'.
• Changed class name reparator from '_' '-' to be consisten with other CSS class names used in the same view.
• Shortened the class name prefix from 'fieldname' to 'fldname'. Not completely happy with it, maybe we can use vjimw's approach?

[Diederik van der Boor]

Suggestion.

• Allows the developers to define a list_column_classes attribute on a ModelAdmin, in case they need to specify a class.
  • Only when it's really needed, the class has to be added.
• Define a default class in the thead. This allows changing column widths.
  • People can adjust the column widths easily, without having many extra classes in the HTML.

[Diederik van der Boor]

Patch that does what I've suggested. Add default classes to the columns, allow setting list_column_classes for the rest.

[Diederik van der Boor]

Update change_list, to have a CSS class in the thead. Allows setting column widths.

[Diederik van der Boor]

Add a change_list_classes dictionary to the ModelAdmin class.

[Julien Phalip]

@vdboor, list_column_classes sounds interesting but it's probably over-engineering it a bit.

Ideally I would have liked to just have the field name as a CSS class, as it would have been cleaner and also consistent with the DIV.form-row in the change form. But there might have been a clash in the unlikely, yet possible, event where a model had a field called "nowrap". We can't really change the "nowrap" class as it's been documented for a very long time (​http://docs.djangoproject.com/en/dev/obsolete/admin-css/?from=olddocs#font-styles-and-alignment).

So, I have updated Ramiro's patch and instead I've appended "-cell" to the field name. It feels a little more semantic and cleaner that way. Also more consistent with the admin-checkbox-column class in the table header.

[Julien Phalip]

On a second thought, using a prefix ("cell-xxxx") instead of a suffix ("xxxx-cell") would feel better and seem like better practice. So personally I'd be fine with a prefix even if it wouldn't be consistent with "admin-checkbox-column".

See also #16371 for a related issue.

[Julien Phalip]

The latest patch re-uses one of the earlier suggested ideas, i.e. using a "field-" prefix, as this is more semantic. "cell-" was in fact more about presentation, which is best to avoid.

[Julien Phalip <jphalip@…>]

In 4e0ff351466fc2d74cc8d1d40ea78da2b3859d0d:

Fixed #11195 -- Added CSS classes to the changelist cells to allow style customizations. Thanks to akaihola, Ramiro Morales and vdboor for their work on the patch.