Gwt tablayoutpanel未正确显示

我正在使用普通GWT，并试图在POIP面板中显示一个tablayoutpanel，但当我显示弹出面板时，布局完全混乱，我不知道是什么问题。如果你们中有人能告诉我这件事出了什么问题

    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
ui:generateLocales='default'>

<ui:style>
    .tabPanelExample1
    {
        margin: 10px;
    }
    </ui:style>

<!-- Defining constant variable for using VRS internationalisation messages --> 
<ui:with field='constants'    type='com.vermilionsoftware.vrsgwtp.client.VRSGWTConstants'/>

<g:DialogBox width="800" height="600">
    <g:HTMLPanel>
        <g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
            barHeight="60" width="375px" height="150px">
            <g:tab>
                <g:header>
                    UiBinder Tab 1
                </g:header>
                <g:HTML>
                    Hello tab 1
                    <br />
                    Good bye!
                </g:HTML>
            </g:tab>
            <g:tab>
                <g:header>
                    UiBinder Tab 2
                </g:header>
                <g:HTML>
                    <h2>Hello tab 2</h2>
                </g:HTML>
            </g:tab>
            <g:tab>
                <g:header>
                    UiBinder Tab 3
                </g:header>
                <g:HTML>
                    <strong>
                        <i>
                            <u>Hello tab number 3</u>
                        </i>
                    </strong>
                </g:HTML>
            </g:tab>
        </g:TabLayoutPanel>
    </g:HTMLPanel>
</g:DialogBox> 

.tabpanel示例1
{
利润率：10px；
}
UiBinder表1
您好选项卡1


再见！
UiBinder选项卡2
你好，选项卡2
UiBinder选项卡3

你好，3号标签

MyView类是：

    public class ColourSelectorView extends PopupViewWithUiHandlers<ReportLayoutUiHandlers> implements ColourSelectorPresenter.MyView {

private final Widget widget;
private static ColourSelectorViewUIBinder uiBinder = GWT.create(ColourSelectorViewUIBinder.class);

public interface ColourSelectorViewUIBinder extends UiBinder<Widget, ColourSelectorView> {
}

@Inject
public ColourSelectorView(EventBus eventBus) {
super(eventBus);
widget = uiBinder.createAndBindUi(this);
}

@Override
public Widget asWidget() {
    return widget;
}

公共类colorSelectorView使用UIHandlers扩展PopupViews实现colorSelectorPresenter.MyView{
私有最终小部件；
私有静态colorSelectorViewUIBinder=GWT.create（colorSelectorViewUIBinder.class）；
公共界面颜色选择器或视图UiBinder扩展UiBinder{
}
@注入
公共颜色选择器或视图（EventBus EventBus）{
超级（事件总线）；
widget=uiBinder.createAndBindUi（这个）；
}
@凌驾
公共小部件asWidget（）{
返回控件；
}

}

我的演示者是：

    public class ColourSelectorPresenter extends
    PresenterWidget<ColourSelectorPresenter.MyView> {

public interface MyView extends PopupView {
    // TODO Put your view methods here
}

@Inject
public ColourSelectorPresenter(final EventBus eventBus, final MyView view) {
    super(eventBus, view);
}

@Override
protected void onBind() {
    super.onBind();
}

@Override
protected void onReveal() {
    super.onReveal();

    Window.alert(this.getWidget().getElement().getInnerHTML());
}

公共类colorSelectorPresenter扩展
演示者Widget{
公共接口MyView扩展了PopupView{
//TODO将您的视图方法放在此处
}
@注入
公共颜色选择器呈现器（最终事件总线、最终我的视图）{
超级（事件总线、视图）；
}
@凌驾
受保护的void onBind（）{
super.onBind（）；
}
@凌驾
受保护的void onReveal（）{
super.onReveal（）；
alert（this.getWidget（）.getElement（）.getInnerHTML（））；
}

---

}

尝试将

表格输出面板

包装成一个而不是

HTMLPanel

，或者为

HTMLPanel

指定明确的尺寸。谢谢。我把我的

TabLayoutPanel

包装在一个

FlowPanel

中，但它不起作用，直到我意识到我应该改用

ResizeLayoutPanel

。