Embeding a TabLayoutPanel inside a DockLayoutPanel

Question

I'm trying to embed a TabLayoutPanel inside a DockLayoutPanel but the tabs are not showing up :(

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:DockLayoutPanel unit='PX'>
        <g:north size='200'>
            <g:HTML>
                <h1>
                    My Header
      </h1>
            </g:HTML>
        </g:north>
        <g:center>

            <g:TabLayoutPanel barUnit='PX' barHeight='3'>
                <g:tab>
                    <g:header size='7'>
                        <b>HTML</b>
                        header
                    </g:header>
                    <g:Label>able</g:Label>
                </g:tab>
                <g:tab>
                    <g:customHeader size='7'>
                        <g:Label>Custom header</g:Label>
                    </g:customHeader>
                    <g:Label>baker</g:Label>
                </g:tab>
            </g:TabLayoutPanel>



        </g:center>
        <g:west size='192'>
            <g:HTML>
                <ul>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                </ul>
            </g:HTML>
        </g:west>
    </g:DockLayoutPanel>
</ui:UiBinder>

Answer 1

I have been having the same issue using the new TabLayoutPanel too (the tabs doesn't show up even if it's the only thing on the page). I decided to back to using the (now deprecated) TabPanel instead. Try and see if that works instead:

Example code:

<g:TabPanel width="100%" height="100%" ui:field="gwtimeTabPanel">
    <g:Tab>
    <g:TabHTML>Tab title</g:TabHTML>
    <g:FlowPanel>
            <!-- tab contents goes here -->
        </g:FlowPanel>
    </g:Tab>
</g:TabPanel>

Answer 2

If you're seeing nothing at all, make sure that the TabLayoutPanel either (a) has an explicit size, or (b) is ultimately attached to the RootLayoutPanel (see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize for more details).

If the problem is a lack of styling on the tabs (i.e., you're just seeing raw text where the tabs should be), you'll need to add some styles (the CSS rules you'll need are described in TabLayoutPanel's javadoc). There are not yet any default styles for TabLayoutPanel, but we'll be adding some soon.

Answer 3

The example from the JavaDoc is somewhat misleading - the bar height of 3 will hide the tab headings and a height needs to be specified for the body. Use something like:

<g:TabLayoutPanel barUnit='PX' barHeight='25' height="200px" >

or

<ui:style>
.tab {
    height: 200px;
}

<g:TabLayoutPanel barUnit='PX' barHeight='25' styleName="{style.tab}" >

Also, you can find a basic CSS style for TabLayoutPanel on comment #5 in the following issue:

http://code.google.com/p/google-web-toolkit/issues/detail?id=4429