Opened 5 years ago

Closed 5 years ago

#16371 closed Bug (fixed)

model fieldname as css class in admin edit view

Reported by: Thomas Owned by: Adam Mckerlie
Component: contrib.admin Version: 1.3
Severity: Normal Keywords: css class admin
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

The Django admin adds the field name as a css class to the div element that
will contain the field input element. That leads to an odd look since there
might be a css class with the same name. As an example write a model with a
field named "button". In the admin this field's row will look like a button.

A similar problem might come up within this ticket: #11195

Attachments (5)

fieldset.diff (1.0 KB) - added by Thomas 5 years ago.
patch
class-button.jpg (69.3 KB) - added by Thomas 5 years ago.
css_prefix.diff (1.8 KB) - added by Adam Mckerlie 5 years ago.
Adds css_prefix
css_prefix_docs.diff (815 bytes) - added by Adam Mckerlie 5 years ago.
Docs for patch.
16371.admin-field-css-classes.diff (4.4 KB) - added by Julien Phalip 5 years ago.

Download all attachments as: .zip

Change History (13)

Changed 5 years ago by Thomas

Attachment: fieldset.diff added

patch

comment:1 Changed 5 years ago by Aymeric Augustin

Easy pickings: unset
Has patch: set
Needs documentation: unset
Needs tests: unset
Patch needs improvement: set
Triage Stage: UnreviewedDesign decision needed

As is, the patch is backwards incompatible.

comment:2 Changed 5 years ago by Julien Phalip

Do you have specific examples where this is an issue? I for one actually have many customised admins that make use of the CSS class as it currently is (both for styling and JS transformations).

Changed 5 years ago by Thomas

Attachment: class-button.jpg added

comment:3 Changed 5 years ago by Thomas

I have attached a screenshot showing the problem. I have a field on my model
named button and there is a css class in the admin that conflicts with that
so that the field row in the admin gets styled like a button.


I would suggest to add an option for prefixing this css class so that this fix
will not break anything:

    class SomeModelAdmin(admin.ModelAdmin):
        css_prefix = 'form-row-field-'

Unfortunately I could not figure out how to accomplish that, hence the
noob patch.

comment:4 Changed 5 years ago by Julien Phalip

Needs tests: set
Triage Stage: Design decision neededAccepted
UI/UX: set

Yes, this is a problem. The approach in your patch (adding a prefix directly inside the template) actually seems like the right thing to do, although "field-" would be sufficient. This change would definitely break some websites as currently this CSS class name is the only way of identifying an input field from CSS or from a JS script, so if we take that path then some backwards-incompatibility notes should indeed be provided.

comment:5 Changed 5 years ago by Adam Mckerlie

Owner: changed from nobody to Adam Mckerlie
Status: newassigned
Triage Stage: AcceptedDesign decision needed

I've included a patch that adds css_prefix to ModelAdmin options. I've also added docs (which definitely need to be looked at).

I'm also not sure if this is the best way to go or if there is a better way to add this functionality.

Changed 5 years ago by Adam Mckerlie

Attachment: css_prefix.diff added

Adds css_prefix

Changed 5 years ago by Adam Mckerlie

Attachment: css_prefix_docs.diff added

Docs for patch.

comment:6 Changed 5 years ago by Julien Phalip

Triage Stage: Design decision neededAccepted

Thank you for your suggestion. However, to be honest I think it would be overkill to offer such a customisation hook here. More importantly this would open the door for many more suggestions to customise various CSS parameters at the ModelAdmin level, and really we don't want that. The most important here is to ensure that bugs like the one reported in this ticket are avoided, and using a standard prefix as simple as "field-" would do the trick. The main requirement is that the prefix contains a character (e.g. '-') that may not be present in a field name.

Changed 5 years ago by Julien Phalip

comment:7 Changed 5 years ago by Julien Phalip

Needs tests: unset
Patch needs improvement: unset

The attached patch adds the "field-" prefix to the main form's and inline forms' CSS class names.

comment:8 Changed 5 years ago by Julien Phalip

Resolution: fixed
Status: assignedclosed

In [16953]:

Fixed #16371 -- Added a prefix "field-" to all CSS class names automatically generated from field names in admin forms to avoid conflicts with other common class names (e.g. "button"). This is backwards-incompatible for those who previously used plain field names as selector in custom style sheets or javascript transformations.

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