Thursday, 3 February 2011

Fieldsets and Vertical tabs

The CSS for the vertical tabs, seen mostly on node forms, does something quite unpleasant - it hides all <legend> elements. This is fine when it's converting fieldsets into vertical tabs, but it assumes that every fieldset  should be vertical tab - which is not true.

A quick fix for this, especially if you're using Seven as your admin theme, is to add this simple definition:

div.vertical-tabs .vertical-tabs-panes .fieldset-wrapper legend {
  display:block;
  margin-bottom:2.5em;
}
I also found that the legend seems to overwrite the top of the fieldset contents so required the margin-bottom. YMMV.

No comments: