model fieldname as css class in admin edit view

[Thomas]

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

[Thomas]

patch

[Aymeric Augustin]

As is, the patch is backwards incompatible.

[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).

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

[Julien Phalip]

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.

[Adam Mckerlie]

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.

[Adam Mckerlie]

Adds css_prefix

[Adam Mckerlie]

Docs for patch.

[Julien Phalip]

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.

[Julien Phalip]

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

[Julien Phalip]

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.