Tomahawk t:panelTabbedPane.html Layout Issue

12/20/2008

Current Structure

Tab One Tab Two Tab Three Tab Four

The Tomahawk "panelTabbedPane" component creates a panel with tabs at the top. Unfortunately, the tabs stretch to the full width of the panel, with the result that, if the panels have content of differing width, as you click from one tab to another the tabs themselves change in size and location. Not cool. This behavior is due to the specific HTML table structure used, which is like this table. It is extremely difficult to control the layout of this component using CSS alone.

Desired Structure

Tab One Tab Two Tab Three Tab Four

This structure gives the tabs their own table within the top row, which allows the tabs to not stretch across the whole width of the table. This is a much more flexible layout, and can easily be made to behave like the existing structurepannelTabbedPane component too (by making the top table width be 100%).

Fully-styled version

Tab One Tab Two Tab Three Tab Four

Adding just a few CSS classes results in a simple tabbed panel that looks clean and professional. You can then go further, adding rounded corners and color gradations using background images if you like.