Problem/Motivation

The classes applied to fields follow this pattern: field-type-[type] and field-name-[name]

This allows a theme to easily style a particular field or to style a particular type of field.

Unfortunately, the node edit form uses the exact same class names for the field form widgets. Completely different HTML (rendered field vs. form widget), but the exact same class. This is super problematic as any moderately complex field styling can break the corresponding field widget when adding or editing a node.

The classes on the node edit form's field widget containers are to "aid in theming", but they do the opposite. In order to style the field widgets, you first have to undo the styling for the rendered field and then apply the desired widget styling. Even if you don't want special widget styling, you still have to undo the rendered field styling. :-p

Proposed resolution

Change the classes used on the field widget wrappers. There's no reason to use the same class. The easiest way is to prepend form- to the class names, so on the node edit form, they'd be: form-field-type-[type] and form-field-name-[name].

We can do this with a form_alter(). Also, I've opened a core issue for this: #1245218: Field styling bleeds into node edit forms

API changes

This will change the class names on field widget containers. But that's the point. They are currently "broken" by anyone's definition.

Comments

johnalbin’s picture

Version: 7.x-5.x-dev » 7.x-3.x-dev
Status: Active » Fixed

This has been committed to 7.x-5.x and 7.x-3.x. http://drupalcode.org/project/zen.git/commit/78d5cb8

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Expanded problem description and fixed broken HTML comment.