Tomahawk t:panelTabbedPane.html Layout Issue |
12/20/2008 |
| 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. |
| ||||
|
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%). |
||||
| ||||
|
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. |