views:

98

answers:

1

I want to put some anchor inside the body of tab panel with two tabs. But my anchors are not visible. The code is as follows

<g:TabLayoutPanel ui:field="lhsTabPanel" barUnit="PX" barHeight="60">
    <g:tab>
        <g:header>Analysis</g:header>
        <g:FlowPanel>
        <g:Anchor ui:field='personalInformation'>Personal Information</g:Anchor>
        </g:FlowPanel>
    </g:tab>
    <g:tab>
        <g:header>Comparison</g:header>
        <g:FlowPanel  ui:field="comparisonContent"/>                    
    </g:tab>                        
</g:TabLayoutPanel> 

The personal information tab is not visible

+1  A: 

TabLayoutPanels must be added to other widgets that implement ProvidesResize. For example, if you are adding this TabLayoutPanel to RootPanel instead of RootLayoutPanel, you won't be able to see the TabLayoutPanel because RootPanel does not implement ProvidesResize.

You can't see the contents of the tabs because the TabLayoutPanel does not know how big it should be. Try adding it to some descendant of a LayoutPanel and setting its size explicitly with the setWidgetLeftRight and related functions.

Check out http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels for more information.

Riley
Thanks. This helped. I implemented the solution little differently. I provided the width and height to g:TabLayoutPanel as <g:TabLayoutPanel ui:field="rightTabPanel" width="100%" height="100%" barUnit="EM" barHeight="3">
lalit
Glad you have it working - Make sure the size recalculates when you change the size of the browser, etc. I struggled with this same problem for a while, and ended up restructuring my code to use LayoutPanels for most of the basic architecture. Now I love them! ;)
Riley