Skip to content Skip to navigation

Troubleshooting the Field Group 7.x-1.4 Update

In July, 2014, the Field Group module was updated from 7.x-1.1 to 7.x-1.4 on Stanford Sites. This update has the potential to cause issues with CSS, as certain types of markup were removed from the HTML output of the page.

Background

The Field Group module allows site builders to group fields together on the back-end edit form of entities (e.g., nodes, BEANs), and on the front-end display of those entities. The latter is what was affected.

The Issue

In Field Group 7.x-1.1, field groups that were configured as <div> elements would get a class of group_groupname and group-groupnameapplied to them (note the underscore and the hyphen in each class):

<div class="field-group-format group_foo field-group-div group-foo  speed-fast effect-none">

In Field Group 7.x-1.4, the group_groupname has been removed, but group-groupname persists:

<div class=" group-foo field-group-div" id="node-article-full-group-foo">

Before (7.x-1.1)

Configuration screen for Field Group

After (7.x-1.4)

Configuration screen for Field Group

The Fix

If you have CSS like the following:

.group_foo {
  border-right: 1px solid #000000;  
}

simply update it to this:

.group_foo, .group-foo {
  border-right: 1px solid #000000;  
}

Better yet, the Field Group module allows you to assign your own classes and IDs to field group elements, so you should add those and target those names in your CSS (therefore not relying on the markup output by the Field Group module). Read Megan Miller's excellent article, "How I learned the hard way to create reusable classes" for more on that subject.

Categories: