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)
Change History (20)
by , 15 years ago
Attachment: | 11195_admin-changelist-cell-class-fieldname.1.diff added |
---|
comment:1 by , 15 years ago
Triage Stage: | Unreviewed → Design decision needed |
---|
by , 14 years ago
Attachment: | 11195_admin-changelist-cell-class-fieldname.r15458.diff added |
---|
Patch and tests updated for Django r15458 (between 1.3b1 and 1.3)
follow-up: 4 comment:3 by , 14 years ago
by , 14 years ago
Attachment: | 11195.1.diff added |
---|
akaihola's patch updated to current trunk status. Changed CSS class name prefix to 'fldname-'
comment:4 by , 14 years ago
Needs documentation: | set |
---|---|
Triage Stage: | Design decision needed → Accepted |
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 tofieldname_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?
comment:5 by , 14 years ago
Severity: | → Normal |
---|---|
Type: | → New feature |
comment:6 by , 14 years ago
Easy pickings: | unset |
---|
Suggestion.
- Allows the developers to define a
list_column_classes
attribute on aModelAdmin
, 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.
by , 14 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 , 14 years ago
Attachment: | 11195_change_list_thead_classes.patch added |
---|
Update change_list, to have a CSS class in the thead. Allows setting column widths.
by , 14 years ago
Attachment: | 11195_modeladmin_change_list_classes.patch added |
---|
Add a change_list_classes dictionary to the ModelAdmin class.
by , 14 years ago
Attachment: | 11195.changelist-cells-css-classes.diff added |
---|
comment:7 by , 14 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 , 13 years ago
UI/UX: | set |
---|
comment:9 by , 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 , 13 years ago
Attachment: | 11195.changelist-cells-css-classes.2.diff added |
---|
comment:10 by , 13 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 , 12 years ago
Cc: | added |
---|
comment:12 by , 11 years ago
Resolution: | → fixed |
---|---|
Status: | new → closed |
patch: initial implementation and tests