Awesome module(s), love it.

My client handed me a design which requires the tabs (for CCK fields and for views tabs):

  • to not wrap (ie all tabs on the same line)
  • ,

  • all tabs to be the same height (with some tabs having text wrapped to multiple lines), and
  • tabs should expand horizontally in proportion to the amount of text in them (ie not all be the same width)

.
The obvious answer to these requirements is using a table layout. After discovering CSS "display:table" isn't supported by IE (of course) the only other approach seemed to be to actually create HTML tables. However the javascript for this module relies on the tabs being constructed with UL > LI elements. So I've modified the default theming function to add some unique CSS class names to the UL and LI elements and the javascript (tabs.js and ui.tabs.js) to use these instead of the HTML element names.

In the attached patch the UL element is given the class "tab-container" and the LI elements have the class "tabset-tab" (the SPAN element already has "tab" so that can't be used for the actual tab elements).

I've also attached an example table-based theme TPL file which I've tested the patches with.

The only thing that I think might not be working properly is when there's a validation error with a form element in a tab in the node editing view, but I wasn't sure what this was supposed to be doing anyway, and it doesn't seem to work properly without any of the changes I made (it just displays an empty red "error" kind of box above the tabs, using the "description" div, which might be the expected behaviour, but I don't know). With my changes this empty red box doesn't appear (the classes for the description DIV don't get changed, I couldn't work out why).

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ehudash’s picture

Seems like you beat me to it :)
A generic design to the tabs module is always better.

You think this will be applied in the next version of Tabs?