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

[Phil Gyford]

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:

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-?

[Tim Graham]

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

[Faheel Ahmad]

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 or field__box (this one is based on the ​BEM methodology).

[Faheel Ahmad]

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.

[Faheel Ahmad]

​PR

[Tim Graham <timograham@…>]

In 5d4d62b:

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