Opened 15 years ago

Closed 11 years ago

#11195 closed New feature (fixed)

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

Reported by: Antti Kaihola Owned by: nobody
Component: contrib.admin Version: dev
Severity: Normal Keywords: css
Cc: chris@… Triage Stage: Accepted
Has patch: yes Needs documentation: yes
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

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.

Attachments (8)

11195_admin-changelist-cell-class-fieldname.1.diff (3.5 KB ) - added by Antti Kaihola 15 years ago.
patch: initial implementation and tests
11195_admin-changelist-cell-class-fieldname.r15458.diff (3.4 KB ) - added by Antti Kaihola 13 years ago.
Patch and tests updated for Django r15458 (between 1.3b1 and 1.3)
11195.1.diff (5.3 KB ) - added by Ramiro Morales 13 years ago.
akaihola's patch updated to current trunk status. Changed CSS class name prefix to 'fldname-'
change-list-classes.patch (3.2 KB ) - added by Diederik van der Boor 13 years ago.
Patch that does what I've suggested. Add default classes to the columns, allow setting list_column_classes for the rest.
11195_change_list_thead_classes.patch (1.8 KB ) - added by Diederik van der Boor 13 years ago.
Update change_list, to have a CSS class in the thead. Allows setting column widths.
11195_modeladmin_change_list_classes.patch (4.3 KB ) - added by Diederik van der Boor 13 years ago.
Add a change_list_classes dictionary to the ModelAdmin class.
11195.changelist-cells-css-classes.diff (7.7 KB ) - added by Julien Phalip 13 years ago.
11195.changelist-cells-css-classes.2.diff (7.8 KB ) - added by Julien Phalip 12 years ago.

Download all attachments as: .zip

Change History (20)

by Antti Kaihola, 15 years ago

patch: initial implementation and tests

comment:1 by Chris Beaven, 15 years ago

Triage Stage: UnreviewedDesign decision needed

by Antti Kaihola, 13 years ago

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

comment:2 by Julien Phalip, 13 years ago

#14291 is a dupe.

in reply to:  2 ; comment:3 by Antti Kaihola, 13 years ago

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.

by Ramiro Morales, 13 years ago

Attachment: 11195.1.diff added

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

in reply to:  3 comment:4 by Ramiro Morales, 13 years ago

Needs documentation: set
Triage Stage: Design decision neededAccepted

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 in the class name given to the cell, it is the model field 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 separator from '_'to '-' to be consistent with other CSS class names used in the same view.
  • Shortened the class name prefix from 'fieldname' to 'fldname'. Still not completely happy with it, maybe we can simply use vjimw's approach?
Last edited 13 years ago by Ramiro Morales (previous) (diff)

comment:5 by Chris Beaven, 13 years ago

Severity: Normal
Type: New feature

comment:6 by Diederik van der Boor, 13 years ago

Easy pickings: unset

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.
Last edited 13 years ago by Diederik van der Boor (previous) (diff)

by Diederik van der Boor, 13 years ago

Attachment: change-list-classes.patch added

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

by Diederik van der Boor, 13 years ago

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

by Diederik van der Boor, 13 years ago

Add a change_list_classes dictionary to the ModelAdmin class.

by Julien Phalip, 13 years ago

comment:7 by Julien Phalip, 13 years ago

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

comment:8 by Julien Phalip, 13 years ago

UI/UX: set

comment:9 by Julien Phalip, 13 years ago

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.

by Julien Phalip, 12 years ago

comment:10 by Julien Phalip, 12 years ago

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.

comment:11 by Chris Adams, 12 years ago

Cc: chris@… added

comment:12 by Julien Phalip <jphalip@…>, 11 years ago

Resolution: fixed
Status: newclosed

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.

Note: See TracTickets for help on using tickets.
Back to Top