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

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.