Code

Opened 3 years ago

Closed 3 years ago

#16371 closed Bug (fixed)

model fieldname as css class in admin edit view

Reported by: thomasbilk Owned by: silent1mezzo
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 thomasbilk 3 years ago.
patch
class-button.jpg (69.3 KB) - added by thomasbilk 3 years ago.
css_prefix.diff (1.8 KB) - added by silent1mezzo 3 years ago.
Adds css_prefix
css_prefix_docs.diff (815 bytes) - added by silent1mezzo 3 years ago.
Docs for patch.
16371.admin-field-css-classes.diff (4.4 KB) - added by julien 3 years ago.

Download all attachments as: .zip

Change History (13)

Changed 3 years ago by thomasbilk

patch

comment:1 Changed 3 years ago by aaugustin

  • Easy pickings unset
  • Has patch set
  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement set
  • Triage Stage changed from Unreviewed to Design decision needed

As is, the patch is backwards incompatible.

comment:2 Changed 3 years ago by julien

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 3 years ago by thomasbilk

comment:3 Changed 3 years ago by thomasbilk

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 3 years ago by julien

  • Needs tests set
  • Triage Stage changed from Design decision needed to Accepted
  • 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 3 years ago by silent1mezzo

  • Owner changed from nobody to silent1mezzo
  • Status changed from new to assigned
  • Triage Stage changed from Accepted to Design 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 3 years ago by silent1mezzo

Adds css_prefix

Changed 3 years ago by silent1mezzo

Docs for patch.

comment:6 Changed 3 years ago by julien

  • Triage Stage changed from Design decision needed to Accepted

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 3 years ago by julien

comment:7 Changed 3 years ago by julien

  • 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 3 years ago by julien

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Add Comment

Modify Ticket

Change Properties
<Author field>
Action
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.