Opened 7 years ago

Closed 7 years ago

#29248 closed Bug (fixed)

Model field names can conflict with admin's field-box CSS class

Reported by: Phil Gyford Owned by: Faheel Ahmad
Component: contrib.admin Version: 2.0
Severity: Normal Keywords:
Cc: elky Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: no

Description

In Admin edit screens, fields are given a CSS class with their field name. e.g. A model field called title will have its input field, label, etc, surrounded by a div like: <div class="form-row field-title">.

However there is a field-box class used in admin's forms.css stylesheet:

fieldset .field-box {
    float: left;
    margin-right: 20px;
}

So, if you have a model with a field called box, then when it's displayed on an Admin edit screen it is floated left and the next field appears to its right:

https://i.imgur.com/wYuausq.png

I think that field-box is the only such potential conflict in forms.css. I guess it should be renamed to something that does not start with field-?

Change History (6)

comment:1 by Tim Graham, 7 years ago

Cc: elky added
Summary: Model field names can conflict with field-box CSS class in AdminModel field names can conflict with admin's field-box CSS class
Triage Stage: UnreviewedAccepted

A note in the "backwards incompatible changes" section of the release notes may be useful as that class has been there since Django 1.0 (7a9b55ddc4d49775a696d1d34629ebbad2499fa3).

comment:2 by Faheel Ahmad, 7 years ago

Owner: changed from nobody to Faheel Ahmad
Status: newassigned

It does seem like field-box is the only potentially conflicting class in forms.css as no other class starts with field-. My suggestion is to rename it to either fieldbox, fieldBox or field__box (the last one being based on the BEM methodology).

Last edited 7 years ago by Faheel Ahmad (previous) (diff)

comment:3 by Faheel Ahmad, 7 years ago

Since classes in forms.css are in camel case, fieldBox seems to be the appropriate choice to me. If anyone has any suggestion regarding this do let me know. I'll have a PR ready in a few days.

comment:4 by Faheel Ahmad, 7 years ago

Has patch: set

comment:5 by Carlton Gibson, 7 years ago

Triage Stage: AcceptedReady for checkin

comment:6 by Tim Graham <timograham@…>, 7 years ago

Resolution: fixed
Status: assignedclosed

In 5d4d62b:

Fixed #29248 -- Renamed admin CSS class field-box to fieldBox.

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