Field styling bleeds into node edit forms

Created on 23 May 2019, almost 6 years ago
Updated 28 April 2023, almost 2 years ago

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 containers created in field_default_form(). 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].

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.

This fix is done in the Zen theme here: https://git.drupalcode.org/project/zen/blob/7.x-6.x/template.php#L563

πŸ› Bug report
Status

Needs review

Version

7.0 ⚰️

Component
CSSΒ  β†’

Last updated 10 days ago

Created by

πŸ‡§πŸ‡ͺBelgium pol Brussels

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024